webpack學習之路(八)壓縮代碼

代碼的壓縮能夠分爲三個部分,HTML CSS JS。咱們挨個來看。css

1. HTML壓縮

須要用的插件是html-webpack-plugin文檔html

其實呢,這個插件主要是用來生成html文件,將 webpack中entry配置的相關入口chunkextract-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
複製代碼

2. 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.0optimize-css-assets-webpack-plugin@4.0.0版本及以上僅支持webpack v4

3. JS壓縮

由於webpack v4內置了uglifyjs-webpack-plugin,因此咱們默認打包就會壓縮js文件。可是若是你想有特殊的配置,也能夠手動下載uglifyjs-webpack-plugin,配置參數文檔

參數列表:

  • test,測試匹配文件
  • include,壓縮包含文件
  • exclude,壓縮排除文件
  • chunkFilter,過濾能夠壓縮的塊
  • cache,是否啓用文件緩存
  • cacheKeys,覆蓋默認緩存鍵
  • parallel,並行壓縮配置
  • sourceMap,源碼映射
  • minify,自定義壓縮配置項
  • uglifyOptionsuglifyjs配置項
  • extractComments,註釋操做配置
  • warningsFilter,過濾uglifyjs警告配置

連接文章

webpack學習之路(七)source map

webpack學習之路(六)hash/chunkHash/contentHash

webpack學習之路(五)loader初識及經常使用loader介紹

webpack學習之路(四)webpack-hot-middleware實現熱更新

webpack學習之路(三)webpack-dev-middleware

webpack學習之路(二)webpack-dev-server實現熱更新

webpack學習之路(一)基礎配置

I am moving forward.

相關文章
相關標籤/搜索