什么，新增npm包生产环境打包竟然报错!

前言

本人在npm发布了一个常用方法工具包@lihai-js/tool，有具体的api说明。@lihai-js/tool github地址github,欢迎大家提issues。

项目中新引入@lihai-js/tool包,生产环境下打包竟然报错了！

debug

报错详情

debug思路

1. 项目开发环境下完全可以运行
2. 开发环境成功打包

基于上述两点，判断打包失败，原因在于vue.config.js中插件的使用

vue.config.js配置

let UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const path = require('path');
function isProd() {
    return process.env.NODE_ENV === 'production';
}
module.exports = {
    configureWebpack: {
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name][hash].js',
            chunkFilename: 'js/[name][hash].js'
        },
        plugins: isProd && [
            new CompressionWebpackPlugin({
                filename: "[path][base].gz",
                test: /\.(js|css)(\?.*)?$/i,
                threshold: 10240,
                deleteOriginalAssets: false,
                algorithm: "gzip",
            })
        ],
        optimization: isProd && {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        warnings: false,
                        compress: {
                            pure_funcs: ['console.log', 'console.debug']
                        }
                    }
                })
            ],
            splitChunks: isProd && {
                chunks: 'all',
                minSize: 50000,
                maxSize: 300000,
                minChunks: 1,
                maxAsyncRequests: 10,
                maxInitialRequests: 10,
                automaticNameDelimiter: '~',
            }
        },
    },
}

版本详情

webpack 4.44.2
webpack-cli 4.7.2
webpack-dev-server 3.11.0
uglifyjs-webpack-plugin: 2.2.0
compression-webpack-plugin: 1.1.12

vue.config.js配置插件使用少，为找出哪个配置出问题，进行逐功能注释打包。

问题插件在于uglifyjs-webpack-plugin配置，uglifyjs-webpack-plugin插件不支持ES6语法压缩。@lihai-js/tool均使用了ES6 类对方法封装

配置可替换插件

uglifyjs-webpack-plugin对ES6不支持，官方推荐使用TerserWebpackPlugin插件

下载

npm i terser-webpack-plugin -D

配置

optimization: isProd && {
    minimizer: [
        new TerserPlugin({
            parallel: true,
            terserOptions: {
                warnings: false,
                compress: {
                    pure_funcs: ['console.log', 'console.ware', "console.debug", 'console.error']
                }
            },
        })
    ],

    splitChunks: isProd && {
        chunks: 'all',
        minSize: 50000,
        maxSize: 300000,
        minChunks: 1,
        maxAsyncRequests: 10,
        maxInitialRequests: 10,
        automaticNameDelimiter: '~',
    }
}

还是报错! 但报错内容变了

Goolge结果:版本兼容性问题

webpack当前版本为4.44.2,terser-webpack-plugin版本为5.1.4,它当前版本太高了

terser-webpack-plugin降级

npm i terser-webpack-plugin@4 -D

完美解决,正常使用打包@lihai-js/tool成功