學習地址：
https://segmentfault.com/a/1190000006178770

1.webpack：模塊打包機（分析你的項目結構，找到
JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓
展語言（Scss，TypeScript等），並將其打包為合適的格
式以供瀏覽器使用。）

2.安裝：

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
//初始化
npm init

3.功能：

//生成Source Maps（使調試更容易）
devtool選項 配置結果
source-map
cheap-module-source-map
eval-source-map（開發中經常用的）
cheap-module-eval-source-map

//使用webpack構建本地服務器
npm install --save-dev webpack-dev-server

//Loaders
test：一個匹配loaders所處理的文件的拓展名
的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文
件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
query：為loaders提供額外的設置選項（可選）

loaders有：
處理js文件的:babel
處理css文件的:style-loader,css-
loader,postcss-loader
處理html文件的:html-loader
處理模版文件的:ejs-loader等
處理json文件的:json-loader
處理圖片文件的:file-loader url-loader
image-webpack-loader

//Babel：編譯JavaScript的平臺 （es6,jsx等
）
npm一次性安裝多個依賴模塊，模塊之間用空格
隔開
npm install --save-dev babel-core babel-
loader babel-preset-es2015 babel-preset-react

//css：css-loader使你能夠使用類似@import
和 url(...)的方法實現 require()的功能,style-loader
將所有的計算後的樣式加入頁面中
CSS module：通過CSS模塊，所有的類名，動畫
名默認都只作用於當前模塊
CSS預處理器：sass/less

PostCSS：首先安裝postcss-loader 和
autoprefixer（自動添加前綴的插件）
npm install --save-dev postcss-
loader autoprefixer

4.插件（Plugins）:在webpack配置中的plugins關鍵字部
分添加該插件的一個實例
//HtmlWebpackPlugin：npm install
--save-dev html-webpack-plugin

//Hot Module Replacement（HMR）也
是webpack裏很有用的一個插件，它允許你在修改組件代
碼後，自動刷新實時預覽修改後的效果。在webpack中實
現HMR也很簡單，只需要做兩項配置
在webpack配置文件中添加HMR插件
；
在Webpack Dev Server中添加“hot
”參數；

//OccurenceOrderPlugin :為組件分
配ID，通過這個插件webpack可以分析和優先考慮使用最
多的模塊，並為它們分配最小的ID

//UglifyJsPlugin：壓縮JS代碼；

//ExtractTextPlugin：分離CSS和JS
文件
npm install --save-dev extract-
text-webpack-plugin

//image-webpack-loader 對圖片就行
壓縮

webpack知識總結