Webpack——多进程打包

多进程打包

webpack.config.js

/**
 * 多进程打包
 * 1.下载thread-loader——》cnpm i thread-loader -D
 * 2.哪个loader需要多进程打包就使用该loader，一般给babel-loader使用，使用如下:
 *      // 对js进行兼容性处理
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                // 开启多进程打包
                // 启动进程600ms，进程通信也有开销
                // 只有工作消耗时间比较长，才使用多进程打包
                'thread-loader',
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [["@babel/plugin-transform-runtime"]],
                        //开启缓存，第二次构建时，只处理发生变化的js文件
                        cacheDirectory:true
                    },
                },
            ]
        },
 */
const { resolve } = require('path');
// 引入workbox
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 将css单独提出文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 将通用的loader抽离出来
// 设置nodejs的环境变量
// process.env.NODE_ENV = 'development';
const commonLoaders = [
    MiniCssExtractPlugin.loader, // 使用该loader将js中的css导入到文件中，并引入html文件
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                ident: 'postcss',
                plugins: [['postcss-preset-env', {}]]
            }
        },
    },
]
module.exports = {
    mode: 'development',
    // 单入口
    // entry: './src/js/index.js',
    // 多入口：有几个入口就输出几个bundle
    // entry: {
    //     index: './src/js/index.js',
    //     test: './src/js/test.js',
    // },
    entry: ['babel-polyfill', './src/js/index.js', './src/index.html'],
    output: {
        filename: 'js/[name][contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 以下loader只会匹配一下，提升构建速度
                // 注意：不能有两个loader处理同一个文件
                oneOf: [
                    // 对js进行兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            'thread-loader',
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: ["@babel/preset-env"],
                                    plugins: [["@babel/plugin-transform-runtime"]],
                                    //开启缓存，第二次构建时，只处理发生变化的js文件
                                    cacheDirectory:true
                                },
                            },
                        ]
                    },
                    // css文件处理
                    {
                        test: /\.css$/,
                        use: [
                            ...commonLoaders
                        ],
                    },
                    // less文件处理
                    {
                        test: /\.less$/,
                        use: [
                            ...commonLoaders,
                            'less-loader'
                        ],
                    },
                    // image图片处理
                    {
                        test: /\.(jpg|png|gif)$/,
                        type:"asset",
                        //解析
                        parser: {
                            //转base64的条件
                            dataUrlCondition: {
                                maxSize: 8 * 1024, // 8kb
                            }
                        },
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 处理html中的image资源
                    {
                        test: /\.html$/,
                        loader: 'html-loader',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 字体图标等其他资源处理
                    {
                        exclude: /\.(html|css|js|jpg|png|gif)$/,
                        type: 'asset/resource',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'otherSource/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                ]
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 使用miniCssExtractPlugin插件将css提取为一个文件
        new MiniCssExtractPlugin({
            // 对输出的文件重命名
            filename: 'css/built[contenthash:10].css',
        }),
        // 调用压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
        // 调用PWA插件
        new WorkboxWebpackPlugin.GenerateSW({
            /**
             * 1.帮助serviceworker快速启动
             * 2.删除旧的serviceworker
             *  生成一个serviceworker的配置文件
             */
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    devServer: {
        // 开发服务器项目路径
        static: resolve(__dirname, 'build'),
        // 是否开启gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 是否自动打开浏览器
        open: true,
        // 打开HMR功能
        hot: true,
    },
    // 开启追踪源代码报错功能
    devtool: 'eval-source-map',
    // 使用代码分割功能
    /**
     * 可以将node_modules中的代码单独打包成一个trunk最终输出
     * 自动分析多入口文件中，是否有公共的依赖，如果有会打包成一个单独的trunk
     */
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
}