一.devtool
devtool: “eval-source-map” webpack打包后的文件可讀性非常低纱注，不利于調試辙谜，使用devtool可以生成對應的源碼便于調試瘫辩。使用eval打包源文件模塊山孔，在同一個文件中生成干凈的完整的source map懂讯。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患台颠。在開發(fā)階段這是一個非常好的選項褐望，在生產(chǎn)階段則一定不要啟用這個選項；
二. webpack-dev-server
webpack-dev-server 是一個本地開發(fā)服務器，居于node.js實現(xiàn)的瘫里，使用npm run dev 后就可以使用默認的8080端口在瀏覽器上訪問了实蔽，類似于apache的功能。
三.loaders
loader可以讓webpack有能力調用外部的腳本或工具减宣，實現(xiàn)對不同格式的文件的處理盐须，比如說分析轉換scss為css，或者把下一代的JS文件（ES6漆腌，ES7)轉換為現(xiàn)代瀏覽器兼容的JS文件
css-loader 和 style-loader 就是用來處理樣式的贼邓。
四.babel(很重要)
Babel其實是一個編譯JavaScript的平臺，它可以編譯代碼幫你達到以下目的：
讓你能使用最新的JavaScript代碼（ES6闷尿，ES7等待）塑径，而不用管新標準是否被當前使用的瀏覽器完全支持；
讓你能使用基于JavaScript進行了拓展的語言填具，比如React的JSX统舀；
五.plugins
插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效劳景，執(zhí)行相關的任務誉简。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西盟广，可以這么來說闷串，loaders是在打包構建過程中用來處理源文件的（JSX，Scss筋量，Less…）烹吵，一次處理一個，插件并不直接操作單個文件桨武，它直接對整個構建過程其作用肋拔。
Webpack有很多內置插件，同時也有很多第三方插件呀酸，可以讓我們完成更加豐富的功能凉蜂。
常用的插件：
HtmlWebpackPlugin
Hot Module Replacement（HMR） 熱加載：允許你在修改組件代碼后，自動刷新實時預覽修改后的效果
clean-webpack-plugin 去除build文件中的殘余文件
OccurenceOrderPlugin :為組件分配ID性誉，通過這個插件webpack可以分析和優(yōu)先考慮使用最多的模塊窿吩，并為它們分配最小的ID
UglifyJsPlugin： 壓縮JS代碼
ExtractTextPlugin：分離CSS和JS文件
六.webpack配置文件
- 如果與輸入相關的需求，找entry（比如多頁面就有多個入口）
- 如果與輸出相關的需求艾栋，找output（比如你需要定義輸出文件的路徑爆存、名字等等）
- 如果與模塊尋址相關的需求蛉顽，找resolve（比如定義別名alias）
- 如果與轉譯相關的需求蝗砾，找loader（比如處理sass處理es678N）
- 如果與構建流程相關的需求，找plugin（比如我需要在打包完成后，將打包好的文件復制到某個目錄悼粮，然后提交到git上）
