webpack 相关配置

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const Dotenv = require('dotenv-webpack');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// 移动端适配
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
    stats: {
        errors: true, // 显示错误
            warnings: true, // 显示警告

            // 模块相关
            modules: true, // 显示模块信息
            moduleTrace: true, // 显示模块的依赖关系
            providedExports: true, // 显示导出的内容
            usedExports: true, // 显示使用的导出

            // 块相关
            chunks: true, // 显示包块信息
            chunkGroups: true, // 显示包块组信息
            chunkModules: true, // 显示包块中的模块
            chunkOrigins: true, // 显示包块的来源

            // 资产相关
            assets: true, // 显示资产信息
            assetModules: true, // 显示资产模块信息

            // 入口相关
            entrypoints: true, // 显示入口点信息

            // 性能相关
            performance: true, // 显示性能提示

            // 其他
            colors: true, // 使用颜色显示输出
            logging: 'info', // 设置日志级别 (none, error, warn, info, log, verbose)

            // 自定义
            // 您可以使用正则表达式或字符串来自定义显示哪些模块、块等
            modulesSort: 'size',
            chunksSort: 'size',
            assetsSort: 'size',
            exclude: [/node_modules/],
            maxModules: 0, // 显示的最大模块数量 (0 = no limit)
            maxAssets: 0, // 显示的最大资产数量 (0 = no limit)
            
    },
    optimization: {
        minimizer: [
            // 压缩js
            new TerserPlugin({
                test: /\.(ts|tsx|js|jsx)$/,
                extractComments: true,
                parallel: true,
                cache: true
            })
        ],
        splitChunks: {
            cacheGroups: {
                vendors: {
                    //node_modules里的代码
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all',
                    name: 'vendors', //chunks name
                    priority: 10, //优先级
                    enforce: true
                }
            }
        }
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.less', '.json'],
        alias: {
            '@src': path.resolve(__dirname, '../src/'),
            '@assets': path.resolve(__dirname, '../src/assets/'),
            '@components': path.resolve(__dirname, '../src/components/'),
            '@utils': path.resolve(__dirname, '../src/utils/'),
            '@hooks': path.resolve(__dirname, '../src/hooks/'),
            '@servers': path.resolve(__dirname, '../src/servers/'),
            '@actions': path.resolve(__dirname, '../src/actions/'),
            '@pages': path.resolve(__dirname, '../src/pages/'),
            '@request': path.resolve(__dirname, '../src/request.js'),
            '@config': path.resolve(__dirname, '../src/config.js'),
            '@routeConfig': path.resolve(__dirname, '../src/routeConfig.jsx')
        }
    },
    module: {
        rules: [
            // {
            //     enforce: 'pre',
            //     test: /\.(ts|tsx|js|jsx)$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     options: {
            //         cache: true,
            //         emitWarning: true,
            //         failOnError: true
            //     }
            // },
            {
                test: /\.(js|jsx|ts|tsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 引用您项目中的 Babel 配置文件
                        configFile: path.resolve(__dirname, '.babelrc')
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)$/,
                use: [
                    process.env.ENV_LWD == 'development'
                        ? { loader: 'style-loader' }
                        : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer(),
                                pxtoviewport({
                                    viewportWidth: 375,
                                    mediaQuery: false,
                                    selectorBlackList: ['ant-']
                                })
                            ]
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './assets/images',
                    publicPath: 'assets/images/',
                    esModule: false
                }
            },
            {
                test: /\.(mp3)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './assets/audio',
                    publicPath: 'assets/audio/',
                    esModule: false
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    esModule: false
                }
            }
        ]
    },
    plugins: {
        // 配置入口页面
        html: new HtmlWebpackPlugin({
            title: 'project',
            template: 'public/index.html',
            favicon: path.resolve('public/favicon.ico'),
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
        }),
        // 清理dist包
        cleanWebpack: new CleanWebpackPlugin(),
        // 抽取css
        miniCssExtract: new MiniCssExtractPlugin({
            filename:
                process.env.ENV_LWD == 'development' ? './css/[id].css' : './css/[id].[hash].css',
            chunkFilename:
                process.env.ENV_LWD == 'development' ? './css/[id].css' : './css/[id].[hash].css',
            ignoreOrder: true
        }),
        namedModules: new webpack.NamedModulesPlugin(),
        // 压缩css
        optimizeCssAssets: new OptimizeCssAssetsPlugin(),
        // 生成包依赖图
        bundleAnalyzer: new BundleAnalyzerPlugin({ analyzerPort: 8081 }),
        // 打包进度
        progressBarPlugin: new ProgressBarPlugin(),
        // 加载中文包
        ContextReplacementPlugin: new webpack.ContextReplacementPlugin(/moment\/locale$/, /zh-cn/),
        CompressionPlugin: new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.jsx$|\.less$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        AntdDayjsWebpackPlugin: new AntdDayjsWebpackPlugin({ preset: 'antdv3' }),
        DefinePlugin: new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.ENV_LWD)
        }),
        CopyPlugin: new CopyPlugin([
            { from: './src/assets/js', to: '../dist/assets/js', toType: 'dir' }
        ]),
        HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin(),
        dotnev: new Dotenv()
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true,
        historyApiFallback: true,
        compress: true,
        host: '0.0.0.0',
        useLocalIp: true,
        https: false
    },
    watchOptions: {
        aggregateTimeout: 600
    },
    // externals 排除对应的包，注：排除掉的包必须要用script标签引入下
    externals: {}
};

2.Babel 相关的警告提示 （.babelrc文件）

{
  "presets": [
    "next/babel",
    [
      "@babel/preset-env",
      {
        "targets": [ ">0.2%",
        "not ie <= 99",
        "not android <= 4.4.4",
        "not dead",
        "not op_mini all"]
      }
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "~": "./src"
        }
      }
    ],
//警告提示
["@babel/plugin-proposal-class-properties", { "loose": true }],  
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
    // "@babel/plugin-proposal-optional-chaining",
    // "@babel/plugin-proposal-nullish-coalescing-operator",
    // "@babel/plugin-proposal-private-property-in-object"
    
  ],
  "experimental": {
    "forceSwcTransforms": false
  }
}

3.确保您的 Babel 配置文件被 Webpack 正确加载和使用

module.exports = {
  // ... 其他 Webpack 配置
  module: {
    rules: [
      {
                test: /\.(js|jsx|ts|tsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
    ]
  }
};