webpack学习---优化--多线程打包js(多用于babel中)

多线程打包js,多用于babel中,可以加快打包速度  npm下载 thread-loader

                const { resolve } = require('path');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

                const commonCssLoader = [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    // 还需要在package.json中定义browserslist
                    loader: 'postcss-loader',
                    options: {
                    ident: 'postcss',
                    plugins: () => [require('postcss-preset-env')()]
                    }
                }
                ];

                module.exports = {
                entry: './src/js/index.js',
                output: {
                    filename: 'js/built.[contenthash:10].js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                    {
                        oneOf: [
                        {
                            test: /\.css$/,
                            use: [...commonCssLoader]
                        },
                        {
                            test: /\.less$/,
                            use: [...commonCssLoader, 'less-loader']
                        },
                        {
                            test: /\.js$/,
                            exclude: /node_modules/,
                            use: [
                            /* 
                                开启多进程打包。 
                                进程启动大概为600ms，进程通信也有开销。
                                只有工作消耗时间比较长，才需要多进程打包
                            */
                            {
                                loader: 'thread-loader',
                                options: {
                                workers: 2 // 进程2个
                                }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                presets: [
                                    [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage',
                                        corejs: { version: 3 },
                                        targets: {
                                        chrome: '60',
                                        firefox: '50'
                                        }
                                    }
                                    ]
                                ],
                                cacheDirectory: true
                                }
                            }
                            ]
                        },
                        ]
                    }
                    ]
                },
                plugins: [
                    new MiniCssExtractPlugin({
                    filename: 'css/built.[contenthash:10].css'
                    }),
                    new OptimizeCssAssetsWebpackPlugin(),
                    new HtmlWebpackPlugin({
                    template: './src/index.html',
                    minify: {
                        collapseWhitespace: true,
                        removeComments: true
                    }
                    }),
                ],
                mode: 'production',
                devtool: 'source-map'
                };