代碼的壓縮能夠分爲三個部分,HTML
CSS
JS
。咱們挨個來看。css
HTML
壓縮須要用的插件是html-webpack-plugin
文檔html
其實呢,這個插件主要是用來生成html
文件,將 webpack中entry
配置的相關入口chunk
和 extract-text-webpack-plugin
抽取的css樣式插入到該插件提供的template
或者templateContent
配置項指定的內容基礎上生成一個html文件,具體插入方式是將樣式link
插入到head
元素中,script
插入到head
或者body
中。html5
參數比較多,但咱們這節是爲了壓縮,因此咱們只要關注minify
這個參數。minify
參數真正傳入的是html-minifier
的配置,配置參數列表詳見文檔webpack
目錄:web
.
├── dist
├── package-lock.json
├── package.json
├── src
│ ├── index.html
└── webpack.config.js
複製代碼
webpack.config.js
正則表達式
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true, // 根據HTML5規範解析輸入
collapseWhitespace: true, // 摺疊空白區域
preserveLineBreaks: false, // 當標記之間的空格包含換行符時,始終摺疊爲1換行符(不徹底刪除它)。必須與collapseWhitespace=true一塊兒使用
minifyCSS: true, // 壓縮文內css
minifyJS: true, // 壓縮文內js
removeComments: false // 移除註釋
}
})
複製代碼
新建src/index.html
文件,隨便插入點內容,build
以後看一下npm
├── dist
│ ├── index.html
複製代碼
CSS
壓縮這裏須要用到optimize-css-assets-webpack-plugin
插件文檔json
插件總共有五個參數:緩存
assetNameRegExp
,用來匹配文件名稱的正則表達式,默認寫/\.css$/g
cssProcessor
,用來優化/壓縮CSS的處理器,默認是cssnano
,使用的話記得先安裝cssProcessorOptions
,傳給處理器的參數,默認{}
cssProcessorPluginOptions
,傳給處理器的插件參數,默認{}
canPrint
,指示插件是否能夠將消息打印到控制檯,布爾值,默認爲true
直接上手試一下bash
項目目錄
.
├── dist
├── package-lock.json
├── package.json
├── src
│ ├── index.css
│ └── index.js
└── webpack.config.js
複製代碼
webpack.config.js
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'), // 引入cssnano配置壓縮選項
})
複製代碼
index.js
import './index.css'
複製代碼
而後直接build
咱們能夠在dist
目錄看到打包後的文件
├── dist
│ ├── main_14db90b8.js
│ └── main_5d49fe37.css
複製代碼
main_5d49fe37.css
:
能夠看到已是壓縮過的css了。so easy~
注意:
webpack v3
如下(含3.0)的版本,請使用optimize-css-assets-webpack-plugin@3.2.0
,optimize-css-assets-webpack-plugin@4.0.0
版本及以上僅支持webpack v4
JS
壓縮由於webpack v4
內置了uglifyjs-webpack-plugin
,因此咱們默認打包就會壓縮js文件。可是若是你想有特殊的配置,也能夠手動下載uglifyjs-webpack-plugin
,配置參數文檔
參數列表:
test
,測試匹配文件include
,壓縮包含文件exclude
,壓縮排除文件chunkFilter
,過濾能夠壓縮的塊cache
,是否啓用文件緩存cacheKeys
,覆蓋默認緩存鍵parallel
,並行壓縮配置sourceMap
,源碼映射minify
,自定義壓縮配置項uglifyOptions
,uglifyjs
配置項extractComments
,註釋操做配置warningsFilter
,過濾uglifyjs
警告配置webpack學習之路(六)hash/chunkHash/contentHash
webpack學習之路(五)loader初識及經常使用loader介紹
webpack學習之路(四)webpack-hot-middleware實現熱更新
webpack學習之路(三)webpack-dev-middleware
webpack學習之路(二)webpack-dev-server實現熱更新
I am moving forward.