冲突:多个资产发出相同的文件名

Question

我是一个想要了解它的webpack新手.我在运行webpack时遇到了一个冲突,告诉我:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

我该怎么做才能避免冲突？

这是我的webpack.config.js:

module.exports = {
  context: __dirname + "/app",

  entry: {
    'javascript': "./js/app.js",
    'html': "./index.html",
  },
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"]
      },
      {
        test: /\.html$/,
        loader: "file-loader?name=[name].[ext]",
      }
    ]
  }
};

Answer 1

我对你的方法不太熟悉,所以我会告诉你一个常用的方法来帮助你.

首先,在你的output,你都指定filename到app.js这是有道理的,我的输出仍然会app.js.如果你想让它变得动态,那么就使用吧"filename": "[name].js".

该[name]部分将为您创建动态文件名.这就是你entry作为一个对象的目的.每个密钥都将用作名称来代替[name].js.

第二,你可以使用html-webpack-plugin.您不需要将其包含为test.

Answer 2

我有同样的问题,我发现它是设置一个导致我的问题的静态输出文件名,在输出对象中尝试以下对象.

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

这使得文件名不同并且不会发生冲突.

编辑:我最近发现的一件事是,如果使用HMR重新加载,你应该使用哈希而不是chunkhash.我没有挖出问题的根源,但我只知道使用chunkhash破坏了我的webpack配置

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

应该与HMR合作然后:)

编辑2018年7月:

关于此的更多信息.

散列 这是每次webpack编译时生成的散列,在开发模式下,这对于开发期间的缓存清除很有用,但不应该用于文件的长期缓存.这将覆盖项目的每个构建上的哈希.

Chunkhash 如果将此与运行时块结合使用,则可以将其用于长期缓存,运行时块将查看源代码中的更改并更新相应的块哈希值.它不会更新允许缓存文件的其他文件.

Answer 3

升级到 Webpack 5 后我遇到了同样的问题。我的问题是由copy-webpack-plugin引起的。

下面是忽略指定文件的原始模式，它适用于 Webpack 4，但使用 Webpack 5 会引发错误。

冲突中的错误：多个资产向同一文件名 default.hbs 发出不同的内容

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["default.hbs"]
          }
        },
      ]
    }),
   ],

要修复该错误：

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["**/default.hbs"]
          }
        },
      ]
    }),
   ],

通过不忽略指定的文件，default.hbs（又名 index.html）被复制到构建（又名 /disk）目录中两次，有效地导致 Webpack 尝试将多个资产插入“相同”（重复）文件名中。

Answer 4

我有完全相同的问题.问题似乎发生在文件加载器上.当我删除html测试并包含html-webpack-plugin而不是生成index.html文件时,错误就消失了.这是我的webpack.config.js档案:

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
    },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

html-webpack-plugin生成一个index.html文件,并自动将捆绑的js文件注入其中.

Answer 5

如果你在Angular中遇到同样的错误

解决方案：删除.angular文件夹中的缓存文件夹并再次启动门户ng服务

Answer 6

我有同样的问题,我在文件中找到了这些.

如果您的配置创建了多个"块"(与多个入口点一样或使用CommonsChunkPlugin等插件时),则应使用替换来确保每个文件都具有唯一名称.

• [name] 由块的名称替换.
• [hash] 由编译的哈希替换.
• [chunkhash] 被块的哈希替换.

 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}

Answer 7

就我而言，源地图插件与提取迷你插件冲突。在任何地方都找不到解决方案。css 和 javascript 的源映射写入同一个文件。这是我最终在项目中解决这个问题的方法：

new webpack.SourceMapDevToolPlugin({
    filename: '[name].[ext].map'
}),