filter在ios不兼容 js_Webpack4-(4)js、css压缩插件

我们在没有将css样式从style标签分离出来且在mode: 'production'(生产环境)时，js文件会自动进行压缩。

如果没有不知道如何分离css样式请参照： cyang：Webpack4-(3)css、less、sass-loader抽离css文件以及浏览器前缀兼容插件

但是我们将css样式从style标签分离出来后，使用了mini-css-extract-plugin这个插件，

这样js文件即使在生产环境也不会进行压缩，那么我们就需要使用压缩插件来将js和css文件都进行压缩。

安装

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

配置

const TerserJSPlugin = require('terser-webpack-plugin')
// 分离出css文件
const MIniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    optimization: {    // 打包优化项
        minimizer: [
            new TerserJSPlugin({}),    // js压缩可配置
            new OptimizeCssAssetsWebpackPlugin({}),    // css压缩可配置
        ]
    },
}

运行

npm run build