webpack -- 代碼壓縮

一、代碼壓縮坑

正常情況下，如果我們配置生成環境，webpack會自動幫js壓縮，必須配置--mode=production

scripts: {
    "build": "webpack --mode-production"
}

但是如果我們要把css也壓縮的話，問題就來了，css壓縮

npm install optimize-css-assets-webpack-plugin --save-dev
npm install cssnano --save-dev

調用

const OptimizeCssWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')

plugins: [
    new OptimizeCssWebpackPlugin({
        test: /\.css$/g,
        cssProcessor: cssnano,
        cssProcessorOptions: {discardComments: {removeAll: true;}}, // 這一句似乎是移除所有注釋
        canPrint: true
    })
],
optimization: {
    minimizer: [new OptimizeCssWebpackPlugin({})]
}

用了css壓縮后，我們發現，js不壓縮了，這是需要使用插件uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

調用

const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin')

plugins: [
    new UglifyJSWebpackPlugin()
]

注意，這樣雖然能行，但是看網上，好像這個跟css一樣，也要在optimization的minimizer數組里面