相对比较全的webpack5配置

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require("autoprefixer");
//占位符
//hash chunkhash name id
module.exports = {
    //代码分割
    optimization: {
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                axios:{
                    test:/axios/,
                    name:'axios'
                },
                easyqrcodejs:{
                    test: /easyqrcodejs/,
                    name:'easyqrcodejs'
                },
                jquery:{
                    test: /jquery/,
                    name:'jquery'
                }
                // defaultVendors: {
                //     test: /[\\/]node_modules[\\/]/,  // 正则匹配文件，这里匹配的是node_modules
                // },
            },
        },
        usedExports: true,// 树摇
        minimize: true, // 是否压缩
    },
    devServer: {
        hot:true,
        // host:'0.0.0.0',
        // port:8023,
        open: true,
        client: {
            progress: true,
        },
        proxy: {
            "/hjfs": {
                target: "http://192.168.1.101:8023",
                changeOrigin: true,
                pathRewrite: {'^/hjfs': ''},
            }
        },
        setupMiddlewares: (middlewares, devServer) => {
            devServer.app.post('/hjf/getname', (req, res) => {
                res.send({
                    name: 'sssss'
                })
            })
            return middlewares
        },
    },
    //构建模式  production
    mode: "production",
    devtool:false,
    // devtool: "source-map",
    //上下文 项目打包的相对路径
    // context: "",
    //入口文件
    // entry: "./src/index.js",
    // output: {
    //     //构建的文件资源路径，必须是绝对路径
    //     path:path.resolve(__dirname,"./dist"),
    //     //构建的文件资源叫啥
    //     filename: "index.js"
    // }
    //多入口
    entry: {
        index: './src/index.js',
        other: './src/other.ts'
    },
    output: {
        clean: true,
        //构建的文件资源路径，必须是绝对路径
        // path:path.resolve(__dirname,"./dist"),
        //构建的文件资源叫啥----实际占位符
        // filename: "./js/[name]-[chunkhash:6].js"
        filename: "./js/[name].js"
    },
    resolve: {  //文件扩展名需要添加ts
        extensions: ['.js'],
        alias: {
            aa:'../node_modules/jquery/dist/jquery.js'
        }
    },
    //cdn优化，会直接用cdn引入
    externals:{
        jquery:'jQuery',
    },
    module: {
        rules: [
            {
                test: /\.js?$/, // js
                exclude:/node_modules/,
                use:[
                    {
                        loader: "babel-loader",
                        options: {
                            presets:[
                                [
                                '@babel/preset-env',
                                {
                                    corejs:3,
                                    useBuiltIns:'usage',
                                    targets:{
                                        ie:6
                                    }
                                }]
                            ]
                        }
                    },

                ],
            },
            {
                oneOf: [
                    {
                        test:/\.jsx$/,
                        exclude:/node_modules/,
                        use:[
                            //babel这里其实涉及到了一些写法，主要还是要看官网文档为主
                            {
                                loader: "babel-loader",
                                options: {
                                    presets: [
                                        [
                                            "@babel/preset-react",
                                            // {
                                            //     pragma: "dom", // default pragma is React.createElement (only in classic runtime)
                                            //     pragmaFrag: "DomFrag", // default is React.Fragment (only in classic runtime)
                                            //     throwIfNamespace: false, // defaults to true
                                            //     runtime: "classic" // defaults to classic
                                            //     // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
                                            // }
                                        ]
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        test: /\.(jpg|png|jpe?g|gif)$/,
                        exclude:/node_modules/,
                        type: "asset/resource",
                        generator: {
                            filename: 'static/img/[name][ext]'
                        },
                        parser:{
                            dataUrlCondition:{
                                maxSize:1000 * 1024
                            }
                        }
                        // use:["file-loader"]
                    },
                    {
                        test: /\.css$/,
                        include: path.resolve(__dirname,'src'),
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: "css-loader",
                                options: {
                                    modules: true
                                }
                            },
                            {
                                loader: "postcss-loader",
                                options: {
                                    postcssOptions: {
                                        plugins: [
                                            autoprefixer({
                                                overrideBrowserslist: ["last 50 versions", ">1%"]
                                            })
                                        ]
                                    }

                                }
                            },
                            // "css-loader"
                        ]
                    },
                    {
                        test: /\.less$/,
                        include: path.resolve(__dirname,'src'),
                        use: [
                            MiniCssExtractPlugin.loader,
                            "css-loader",
                            {
                                loader: "postcss-loader",
                                options: {
                                    postcssOptions: {
                                        plugins: [
                                            autoprefixer({
                                                overrideBrowserslist: ["last 50 versions", ">1%"]
                                            })
                                        ]
                                    }

                                }
                            },
                            "less-loader"
                        ]
                    },
                    {
                        test: /\.ts$/,
                        exclude: /node-modules/,
                        use: [
                            {
                                loader: "babel-loader",
                                options: {
                                    presets:[
                                        [
                                            "@babel/preset-env",
                                            {
                                                corejs:3,
                                                useBuiltIns:'usage',
                                                targets:{
                                                    ie:6
                                                }
                                            }
                                        ]
                                    ]
                                }
                            },
                            'ts-loader'
                        ],
                    }
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html', // 让webpack自动生成一个html文件 要把指定的模块里的代码携带者
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件进行重命名
            filename: './css/index.css',
        }),
    ],
    performance: {
        maxEntrypointSize: 50000000,
        // 生成文件的最大体积
        maxAssetSize: 30000000,
    },
}