webpack 的重要功能

一.devtool

devtool: 「eval-source-map」 webpack打包後的文件可讀性很是低，不利於調試，使用devtool能夠生成對應的源碼便於調試。使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；

二. webpack-dev-server

webpack-dev-server 是一個本地開發服務器，居於node.js實現的，使用npm run dev 後就可使用默認的8080端口在瀏覽器上訪問了，相似於apache的功能。

三.loaders

loader可讓webpack有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件
css-loader 和 style-loader 就是用來處理樣式的。

四.babel(很重要)

Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：
讓你能使用最新的JavaScript代碼（ES6，ES7等待），而不用管新標準是否被當前使用的瀏覽器徹底支持；
讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；

五.plugins

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。

Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less…），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

經常使用的插件：

HtmlWebpackPlugin
Hot Module Replacement（HMR） 熱加載：容許你在修改組件代碼後，自動刷新實時預覽修改後的效果
clean-webpack-plugin 去除build文件中的殘餘文件
OccurenceOrderPlugin :爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
UglifyJsPlugin： 壓縮JS代碼
ExtractTextPlugin：分離CSS和JS文件

六.webpack配置文件

• 若是與輸入相關的需求，找entry（好比多頁面就有多個入口）
• 若是與輸出相關的需求，找output（好比你須要定義輸出文件的路徑、名字等等）
• 若是與模塊尋址相關的需求，找resolve（好比定義別名alias）
• 若是與轉譯相關的需求，找loader（好比處理sass處理es678N）
• 若是與構建流程相關的需求，找plugin（好比我須要在打包完成後，將打包好的文件複製到某個目錄，而後提交到git上）