代码压缩

135 阅读1分钟

js 文件压缩 webpack 内置 uglifyjs-webpack-plugin

css 文件压缩 安装 optimize-css-assets-webpack-plugin,同时安装 cssnano

// webpack 4
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    plugins: [
            new OptimizeCSSAssetsPlugin ({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require('cssnano') // css 预处理器
	})
    ]
};

// webpack 5
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
};

html 文件压缩 安装 html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins: [
	new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html',
            chunks: ['index'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })
     ]
};