webpack 配置

webpack.base.js

	const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

modules.export = function (isDev) {
    return {
        //入口文件配置
        entry: path.resolve(__dirname, '../src/index.tsx'),
        output: {
            //打包输出的结果路径
            path: (__dirname, '../dist'),
            //输出的 JS 的名字
            // hash, chunkhash, contenthash
            // 输出文件名，[name] 会根据 entry 中的键名替换
            filename: 'static/js/[name].[hash:8].js',
            //webpack4: clean-webpack-plugin
            //webpack5: 内置了，构建前删除一下 dist
            clean: true,
            //打包后的公共路径
            publicPath: '/'
        },

        //resolve 部分
        resolve: {
            extensions: ['.tsx', '.ts', '.jsx', 'js'], //文件引用是可以不用带文件后缀
        },

        //loader部分
        module: {
            rules: [
                {
                    test: /\.(tsx|ts|jsx|js)$/, // 匹配规则，使用正则表达式匹配以 .tsx|.ts|.jsx|.js 结尾的文件
                    exclude: /node_modules/, // 排除 node_modules 目录
                    use: {
                        loader: 'babel-loader', // 使用 babel-loader 处理匹配到的文件
                        options: {
                            presets: ['@babel/preset-env'] // 使用 @babel/preset-env 进行转译
                        }
                    }
                },
                {
                    oneOf: [
                        {
                            test: /\.less$/,
                            use: [
                                isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                                'css-loader',
                                'less-loader', // 使用 style-loader、css-loader 和 lesscss-loader 处理匹配到的文件
                            ]
                        },
                        {
                            test: /\.css$/,
                            use: [
                                isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                                'css-loader',
                            ]
                        },
                        {
                            test: /\.module\.{less|css}$/,
                            include: [path.resolve(__dirname, '../src')],
                            use: [
                                isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                                {
                                    options: {
                                        modules: {
                                            localIdentName: '[path][name]_[local]--[hash:base64:5]'
                                        }
                                    }
                                },
                                'postcss-locader',
                                'less-loader'
                            ]
                        },
                    ]
                },
                {
                    //webpack 5 之前要用到 url / file-loader
                    test: /\.(png|jpg|jpeg)$/,
                    generator: {
                        filename: 'statis/images/[name].[contenthash:8].[ext]'
                    }
                },
                {
                    //webpack 5 之前要用到 url / file-loader
                    test: /\.(mp4|mp3|rvmb)$/,
                    generator: {
                        filename: 'statis/media/[name].[contenthash:8].[ext]'
                    }
                },
                {
                    //webpack 5 之前要用到 url / file-loader
                    test: /\.(eot|ttf|otf)$/,
                    generator: {
                        filename: 'statis/fonts/[name].[contenthash:8].[ext]'
                    }
                },
            ]
        },
        // 插件配置
        plugins: [
            new HtmlWebpackPlugin({
                //我要把生成的 js 和 css ，注入到一个 html 模版中
                template: path.resolve(__dirname, '../public/index.html')
            }),
            new MiniCssExtractPlugin({
                filename: isDev ? 'static/css/[name].css' :
                    'static/css/[name].[contenthash:8].css'
            })
        ],
        // 优化配置
        optimization: {
            runtimeChunk: 'single', // 提取 webpack 运行时代码到单独的文件
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/, // 匹配规则，匹配 node_modules 目录下的文件
                        name: 'vendors', // 输出 chunk 的名称
                        chunks: 'all' // 在所有的 chunk 中使用这个缓存组
                    }
                }
            }
        }
    }
}

webpack.dev.js

	const { merge } = require("webpack-merge");
const getBaseConfig = require('./webpack.base');
const path = require('path');

module.exports = merge(getBaseConfig(true), {
    mode: "development",
    devtool: "eval-cheap-module-source-map", // 使用 source map 提供源代码到构建后的代码的映射
    devServer: {
        port: 3000,
        compress: false, //不压缩，热更新快一些
        hot: true, // 开启模块热替换
        historyApiFallback: true, //history路由下的 404 问题
        static: {
            //托管的静态文件夹
            dircectory: path.join(__dirname, '../public')
        }

    }
})

webpack.prod.js

	const { merge } = require("webpack-merge");
const getBaseConfig = require('./webpack.base');
const path = require('path');
// //css压缩 webpack5 弃用改成css-minimizer-webpack-plugin
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin')

module.exports = merge(getBaseConfig(false), {
    mode: "production",

    optimization: {
        minimize: true, // 开启代码压缩
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin({
                parallel: true
            }),
            new CssMinimizerWebpackPlugin({ // 添加 CssMinimizerWebpackPlugin 实例到 minimizer 数组中   
                parallel: true, // 启用并行压缩 
                minimizerOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }] // 使用默认配置，并移除所有注释 
                }
            })
        ],
        splitChunks: {
            chunks: 'all', // 对所有类型的 chunk 生效
            minSize: 20000, // 模块的最小大小（字节）
            maxAsyncRequests: 30, // 按需加载时并行请求的最大数量
            maxInitialRequests: 30, // 入口点并行请求的最大数量
            automaticNameDelimiter: '~', // 文件名的连接符
            cacheGroup: {
                vendors: {
                    name: 'vendors',
                    test: /node_modules/,
                },
                common: {
                    name: 'common'
                }
            }
        }
    },
    plugins: []
})

基本配置已完成，有需要的loader，plugins或者其他配置项补充即可