记录工作中webpack配置的使用

1. 去除打印信息 terser-webpack-plugin: ^4.2.3

• 安装

 npm install -D terser-webpack-plugin@4.2.3

• 在vue.config.js中使用

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    plugins: [
        new TerserPlugin({
            cache: true,      // 开启缓存
            sourceMap: false, // 关闭sourceMap
            parallel: true,   // 开启多进程
            terserOptions: {
                warnings: false,
                compress: {
                    drop_console: true,
                    drop_debugger: false,
                    pure_funcs: ['console.log'], // 移除console
                },
            },
        });
    ]
}

2. 打包优化 happypack

• 安装

 npm install -D happypack

• 在vue.config.js中使用

const HappyPack = require("happypack");

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: { loader: "happypack/loader?id=happyBabel" }
        }]
    },
    plugins: [
        new HappyPack({
            id: "happyBabel",
            loaders: ["babel-loader?cacheDirectory"],
            threads: 5, // 线程开启数
        }),
    ]
}