轉：
使用webpack 進行ES6開發
一些題外話
使用 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.jses6 里面存放的是 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());/es6/Person.js
class Person{ constructor(name, age){ this.name = name; this.age = age; } say(){ return `我是${this.name},我今年${this.age}歲了。`; } } export default Person;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
