webpack

webpack是一個打包工具，學名叫做模塊打包器，把所有的模塊打包成一個或少量文件，使你只需加載少量文件即可運行整個應用，而無需像之前那樣加載大量的圖片，css文件，js文件，字體文件等等。

相對於gulp/grunt的自動化構建工具來說，webpack在js，css壓縮，代碼檢查，編譯方面會相對弱一點。因為插件不夠廣泛。所以會有人把兩者結合起來用，一個更好的方式是用npm script代替gulp去完成任務。

一個完整的配置是這樣的。有點點多，但是沒關系。其中一部分其實是完全用不到的

打包js

需要制定entry和output，在js文件中使用import語法去書寫模塊依賴。就可以順利的加載所有的依賴了

module.exports = {
    entry: ‘./src/index.js‘,
    output: {
        path: path.resolve(__dirname, ‘./dist‘),
        filename: ‘bundle.js‘
    }
}

loader 和 plugin，有什麽區別？
loader (加載器)，重在“加載”二字，是用於預處理文件的，只用於在加載不同類型的文件時對不同類型的文件做相應的處理。而 plugin (插件)，顧名思義，是用來增加 webpack 的功能的，作用於整個 webpack 的構建過程。在 webpack 這個大公司中，loader 是保安大叔，負責對進入公司的不同人員的處理，而 plugin 則是公司裏不同職位的職員，負責公司裏的各種不同業務，每增加一種新型的業務需求，我們就需要增加一種 plugin。

模塊熱替換（HMR）

只更新發生變更（替換、添加、刪除）的模塊，而無需重新加載整個頁面（實時加載，LiveReload），這樣可以顯著加快開發速度，一旦打開了 webpack-dev-server 的 hot 模式，在試圖重新加載整個頁面之前，熱模式會嘗試使用 HMR 來更新。

webpack3+react構建應用