30.webpack——webpack5新特性（启动、持久化缓存、资源模块、URIs、moduleIds和chunkIds、tree shaking、nodeJs的polyfill被移除、模块联邦）_俞华的博客-CSDN博客_chunkids

webpack和vite的区别 - 简书

vite介绍 ｜ 与其他构建工具做比较，分析vite预构建和热更新的原理 - 掘金

https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#major-changes-long-term-caching

---

模块module配置

1、处理图片、文字模块配置

            {
                test: /\.(png|jpe?g|ico|pdf)$/,
                use: 'url-loader?limit=40000&name=images/[name].[chunkhash].[ext]'
            },
            {
                test: /\.(mp3|gif|svg|eot|ttf|svg|woff2?)$/,
                use: 'file-loader?name=images/[name].[chunkhash].[ext]'
            },

2、js,jsx的模块配置

thread-loader | webpack 中文文档

使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。

每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。同时会限制跨进程的数据交换。

请仅在耗时的操作中使用此 loader！

  {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: 1,
                            workerParallelJobs: 50,
                            workerNodeArgs: ['--max-old-space-size=1024'],
                            poolRespawn: false,
                            poolTimeout: 2000,
                            poolParallelJobs: 50,
                            name: 'js-thread-pool'
                        }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                [
                                    'react-css-modules',
                                    {
                                        exclude: 'node_modules',
                                        webpackHotModuleReloading: true,
                                        filetypes: {
                                            '.less': {
                                                syntax: 'postcss-less'
                                            }
                                        },
                                        handleMissingStyleName: 'ignore',
                                        generateScopedName: '[name]__[local]___[chunkhash:base64:5]'
                                    }
                                ]
                            ],
                            cacheDirectory: true
                        }
                    }
                ],
                include: [
                    paths.src,
                    paths.lib
                ]
            },

babel-loader：用于处理js,jsx脚本代码的边缘打包，对于一些es6或者高级语法浏览器不能识别的情况，借助babel-loader进行转译，实际babel-loader是webpack和babel的一个中间牵手人，实际生效的还是babel。react项目常用的babel配置如下：

babel.config.js配置文件

module.exports = {
    'presets': [
        [
            '@babel/preset-env',
            {
                'modules': false,
                'targets': {
                    'browsers': [
                        '> 1%',
                        'last 2 versions',
                        'ie >= 10'
                    ]
                },
                'useBuiltIns': 'usage',
                'corejs': 3
            }
        ],
        '@babel/preset-react'
    ],
    'plugins': [
        [require('./config/babel-plugin-oneui-common.js')],
        '@babel/plugin-transform-runtime',
        'react-hot-loader/babel',
        'react-require',
        '@babel/plugin-proposal-object-rest-spread',
        [
            '@babel/plugin-proposal-decorators',
            {
                'legacy': true
            }
        ],
        '@babel/plugin-proposal-class-properties',
        [
            'module-resolver',
            {
                'alias': {
                    'src': './src'
                }
            }
        ]
    ]
};

3、多进程打包（资源并行解析）

thread-loader和happyPack打包原理类似