21、webpack splitChunks分离公共代码

webpack可以使用splitChunks分离业务中公共代码，单独提取成一个文件

src下建立index.js、index2.js、public.js，其中public.js为公共代码提供给其他两个文件使用

案例

webpack.config.js

//  webpack是node写出来的， 需要node的写法
let path = require('path');
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
// 抽离css为单独文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 导入样式压缩
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
const TerserPlugin = require('terser-webpack-plugin')
// webpack相关配置
module.exports = {
    // 压缩 model 必须是production才有效果
    optimization: {
        splitChunks: {  // 分割代码
            cacheGroups: { // 缓存组
                common: { //提取公共代码
                    // 从入口提取
                    chunks: 'initial',
                    // 最小大小
                    minSize: 0,
                    // 使用多少次开始提取
                    minChunks: 2
                },
                vendor: {
                    // 文件名
                    name: 'vendor.js',
                    // 权重，优先提取
                    priority: 1,
                    // 指定范围
                    test: /node_modules/,
                    // 
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2
                }
            }
        },
        minimizer: [
            new TerserPlugin({}),
            new OptimizeCssPlugin()
        ]
    },
    // 开发服务的配置
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './build',
        // 启动压缩
        //compress: true
    },
    // 模式，2种：生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码，生产模式压缩打包后代码
    mode: 'production',
    // 入口,表示从哪里开始打包
    entry: {
        index: './src/index.js',
        index2: './src/index2.js',
    },
    // 表示出口(输出后文件相关配置)
    output: {
        // 哈希8位
        filename: '[name].[hash:8].js',
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, '../dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        })
    ],
    // 模块处理
    module: {
        // loader
        rules: [{
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 打包少于1000kb用base64，否则使用file-loader产生文件
                        limit: 1000,
                        // 产出路径
                        outputPath: 'img/',
                        // 只给图片添加前缀，如果使用publicPath,outputPath无效
                        // publicPath: 'http://itssh.cn/'
                    }
                }
            },
            {
                test: /\.js$/, //匹配js文件
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", {
                                "legacy": true
                            }],
                            ["@babel/plugin-proposal-class-properties", {
                                "loose": true
                            }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                }
            },
            {
                test: /\.css$/, //匹配css文件
                // css-load处理完 再 抽离，从后往前执行loader
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/, //匹配less文件
                // 从后向前执行
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    }
}