冲突：多个块将资产发射到相同的文件名 ./plugin.min.css

Posted 2023-03-08

【中文标题】冲突：多个块将资产发射到相同的文件名 ./plugin.min.css

【英文标题】：Conflict: Multiple chunks emit assets to the same filename ./plugin.min.css

【发布时间】：2019-07-26 07:17:24

【问题描述】：

我在构建 webpack 时收到此错误：

块 plugin.min [entry] 中的错误 ./plugin.min.css （块 0 和 1）

这是我的 webpack.config.js 文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const debug = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');

var extractBlockSCSS = new MiniCssExtractPlugin(
  filename: "./plugin.min.css",
)

var plugins = [
    extractBlockSCSS
];

var scssConfig = [
    
        loader: process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
    , 
    
      loader: 'css-loader',
      options: 
        sourceMap: true
      
    ,
    
      loader: 'sass-loader',
      options: 
        sourceMap: true
      
    
];

var config = 
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : false,
    mode: debug ? 'development' : 'production',
    entry: 
        'plugin.min': './resources/js/entry.js',
        'blocks.build': './resources/blocks/blocks.js'
    ,
    output: 
        path: __dirname + '/dist/',
        filename: '[name].js',
    ,
    module: 
        rules: [
            
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    
                        loader: 'babel-loader'
                    
                ]
            ,
            
                test: /\.scss$/,
                exclude: /node_modules/,
                use: scssConfig
            
        ]
    ,
    plugins: plugins
;

module.exports = (env, argv) => 
    return config;
;

我猜这是因为我使用了相同的提取块文件名？我有多个入口点，所以不确定这是否会导致我看到的错误。是否需要添加更多 css 文件名/mini css 提取插件？

【参考方案1】：

使用 mini-css-extract-plugin

试试这个

new MiniCssExtractPlugin(
    filename: "[name]/../style.css"
),

【讨论】：

请注意，通过将[name] 添加到文件名属性来解决问题。它将被动态地替换为 Webpack 条目属性中定义的名称，从而防止多个 Webpack 条目发送到同一个文件。在这种情况下，路径将是动态的，但也可以使用 filename: '[name].css' 之类的内容。

注意：这会导致“错误：阻止写入仅在大小写或查询字符串方面与已写入文件不同的文件。”