使用webpack 進行ES6開發
來自： https://segmentfault.com/a/1190000004457636
年前摸索著寫了一個使用gulp 進行ES6開發 ，今天再摸索著學習一下webpack吧。。
一些題外話
使用 webpack 的初衷其實是想用 React。
學習 React 的時候，始終被一個問題困擾：既然組件已經模塊化了，比如一個 jsx 文件對應一個組件，這個文件里包含了這個組件的 html 和 js，但是他的樣式該寫在哪里呢？看的網上教程都是寫在 jsx 文件里，通過變量定義，或者直接就寫到全局樣式里面去了。通過變量寫不能定義偽元素，而且在 js 里這樣寫一堆樣式感覺很難受，但是寫在全局又不符合組件化的思想。
查資料的時候發現了一個 css modules 的概念，詳細可以參考 這篇文章 。當然css沒有原生支持這種概念，但在 webpack 里，通過一個 css-loader 就能輕易使用。另外 webpack+React 也很流行的，于是我就開始學習 webpack 了。
開始
一、創建目錄
簡單創建目錄結構如下：
/es6 -- main.js -- Person.js index.html webpack.config.js
es6 里面存放的是 ES6 風格的代碼， main.js 是入口文件， index.html 是首頁， webpack.config.js 是 webpack 的配置文件。
二、安裝 webpack
首先還是要保證安裝了 nodejs，然后通過 npm 安裝即可：
npm install webpack -g
三、配置
打開 webpack.config.js ，編輯如下：
var path = require('path');
module.exports = {
entry: "./es6/main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: path.join(__dirname, 'es6'),
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}
module.exports 導出的對象即是 webpack 的配置對象，其中：
-
entry 是入口文件
-
output 是輸出文件，這里的 filename 給的是 bundle.js ，也就是當 webpack 運行完之后將生成一個 bundle.js 文件
-
loaders 是使用到的所有加載器，在 gulp 里面我們都是使用的是 gulp 的一些插件比如 gulp-rename 、 gulp-concat 等等，在 webpack 里面類似，使用的是各種 loaders ，詳細的 loaders 列表在 這里 。
更多配置屬性的含義在 這里 。
這里使用了一個叫 babel-loader 的加載器，在使用 gulp 進行ES6開發里面有介紹過，我們都是使用 babel 對 ES6 風格的代碼進行轉換，所以在 query 里面同樣使用了 es2015 轉碼規則。下面就安裝這個加載器。
四、安裝 loaders
安裝 babel-loader
npm install babel-loader --save-dev
安裝轉碼規則
npm install babel-preset-es2015 --save-dev
至此準備工作已經做完了，下面可以編寫代碼了。
五、碼代碼
/es6/main.js
import Person from './Person.js';let p = new Person('張三', 20); document.write(p.say());</pre>
/es6/Person.js
class Person{ constructor(name, age){ this.name = name; this.age = age; }say(){ return
我是${this.name},我今年${this.age}歲了。; } }export default Person;</pre>
index.html
在這里就可以直接引用 bundle.js 了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="bundle.js"></script> </body> </html>六、運行
因為有 webpack.config.js 配置文件，所以只需要輸入 webpack 就能運行， webpack 會自動去執行配置文件的內容：
webpack對于大型項目，可能 webpack 會運行很久，所以可以添加一個進度條便于查看：
webpack --progress --colors在 gulp 里，使用 watch 可以監視文件的變化，而在 webpack 里，只需加一個參數：
webpack --watch所以，我們可以使用下面的命令運行：
webpack --progress --colors --watch就是這么簡單！
</div>