Question

我有一个php应用程序，其中资产与webpack 4捆绑在一起。我正在使用SplitChunksPlugin拆分样式和供应商（请参见下面的配置），并使用MiniCSSExtractPlugin创建用于生产的css文件。

我遇到了一个问题，其中MiniCssExtractPlugin创建了一个（我认为）不必要的.js文件，只包含一个空函数。经过深入研究后，我发现这是webpack 4中的错误，将在版本5中修复。很多人建议只删除空文件。我安装了一个名为ExtraneousFileCleanupPlugin的插件，它工作正常，文件消失了。但是，当包含文件（runtime.js，main.js，vendors.js，styles.css）时，我的javascript代码未执行。当不删除由MiniCssExtractPlugin提取的文件并包括它时，一切正常。

为什么？我不想每次在生产中都包含一个空的.js文件。

我们将不胜感激。

Webpack配置

    module.exports = {
    entry: {
        main: './src/assets/js/main.js',
        ...
    },
    ...
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: '/assets/'
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            cacheGroups: {                
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                    priority: -20
                },
                styles: {
                    test: /\.(sa|sc|c)ss$/,
                    name: 'styles',
                    chunks: 'all',
                    priority: -10,
                    enforce: true
                }
            }
        }
    },
    plugins: [
        ...
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        ...
        new ExtraneousFileCleanupPlugin({
            extensions: ['.js']
        })
        ...
    ],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    //'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
};

使用webpack，SplitChunksPlugin和MiniCssExtractPlugin时未执行代码

0 个答案: