webpack4配置momet按需加载,每个文件依然有moment?

发布于 2022-09-11 22:44:12 字数 2866 浏览 25 评论 0

配置了moment按需加载

var webpackConfig = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        another: './src/another-module.js',
    },
    output: {
        filename: '[name].[contenthash].js',
    },
    plugins: [
        // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Caching',
            template: './src/index.html',
        }),
        new LodashModuleReplacementPlugin(),
        new webpack.ContextReplacementPlugin(
            /moment[/\\]locale$/,
            /zh-cn|es|zh-tw|ja/,
        ),
        // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
    optimization: {
        moduleIds: 'hashed',
        runtimeChunk: 'single',
        splitChunks: {
            maxInitialRequests: 4,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                    priority: -10,
                },
                vendor1: {
                    name: 'vendor-antd',
                    test: (module) => {
                        return /[\\/]node_modules[\\/]@ant-design|antd/.test(module.context);
                    },
                    chunks: 'all',
                    priority: 2
                },
            },
        },
    },
    module:{
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env','@babel/preset-react'],
                    plugins: [
                        'lodash',
                        ["import", {
                            "libraryName": "antd",
                            // "libraryDirectory": "es",
                            // "style": "css" // `style: true` 会加载 less 文件
                        }]
                    ],
                }
            }
        },
        {//antd样式
            test: /\.css$/,
            exclude: /src/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 1
                    }
                }
            ]
        }
        ],
    },
    
    // externals: {
    //     lodash: {
    //         commonjs: 'lodash',
    //         commonjs2: 'lodash',
    //         amd: 'lodash',
    //         root: '_',
    //     },
    // },
    // optimization: {
    //     splitChunks: {
    //         chunks: 'all',
    //     },
    // },
};

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文