webacpk4 打包 js

构建目标：

• es6 转义
• 代码合并
• 抽离公共代码
• 代码压缩

需要用到的插件

插件	版本	用途
@babel/core	^7.9.6	核心插件
@babel/preset-env	^7.9.6	转换高级语法/特性到es5或者以下的语法
@babel/runtime	^7.9.6	提取公共的包
@babel/plugin-transform-runtime	^7.9.6	自动引用公共函数
babel-loader	^8.1.0	模块加载器
uglifyjs-webpack-plugin	^2.2.0	代码压缩

创建一个 babel 的配置文件 .babelrc，内容如下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime",
    ]
}

然后编写 webpack 的配置 webpack.conf.js

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

const config = {
	entry: {
        app: 'src/app.js',
    },
    output: {
        path: "dist",
        filename: "[name].[chunkhash].js",
    },
    module: {
        rules: [
        	{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        // 代码压缩
        new UglifyJsPlugin({
            uglifyOptions: {
                warnings: false,
                compress: {
                    drop_console: true, // 删除所有的console语句
                    
                    reduce_vars: true,  // 把使用多次的静态值自动定义为变量
                },
                output: {
                    comments: false, // 不保留注释
                }
            },
            sourceMap: ,
            parallel: true
        }),
    ],
    optimization: {
        minimize: process.env.NODE_ENV === "production",
        splitChunks: {
            chunks: "async", // 共有三个值可选：initial(初始模块)、async(按需加载模块)和all(全部模块)
            minSize: 30 * 1000, // 模块超过30k自动被抽离成公共模块
            maxAsyncRequests: 5,  // 异步加载chunk的并发请求数量<=5
            maxInitialRequests: 3, // 一个入口并发加载的chunk数量<=3
            name: true, // 默认由模块名+hash命名，名称相同时多个模块将合并为1个，可以设置为function

            cacheGroups: {
                
                //公用模块抽离
                scripts: {
                    name: 'common',
                    chunks: 'initial',
                    minSize: 0, //大于0个字节
                    minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
                },
            }
        },
	}
}

webpack 3x 抽离公共代码需要 webpack.optimize.CommonsChunkPlugin 插件，但是 4x 移到了 optimization 内，直接配置即可

关于 babel 7 相关的内容，推荐看这篇文章《一文读懂 babel7 的配置文件加载逻辑》