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

我是一个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]",
      }
    ]
  }
};

我对您的方法不太熟悉，所以我将向您展示一种帮助您的常见方法。

首先，在你的output，你都指定filename到app.js这是有道理的，我的输出仍然会app.js。如果要使其动态化，请使用"filename": "[name].js"。

该[name]部分将使文件名动态化。这就是您entry作为对象的目的。每个密钥都将用作替换的名称[name].js。

其次，您可以使用html-webpack-plugin。您无需将其作为test。

我遇到了同样的问题，我发现它设置的静态输出文件名导致了我的问题，请在输出对象中尝试以下对象。

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 如果将其与运行时块一起使用，则可以将其用于长期缓存，运行时块将查看源代码中发生了什么更改并更新相应的块哈希。它不会更新其他文件，从而可以缓存您的文件。

我有完全一样的问题。问题似乎发生在file-loader。当我删除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文件注入其中。

我遇到了同样的问题，并且在文档中找到了这些问题。

如果您的配置创建的不止一个“块”（例如具有多个入口点，或者使用诸如CommonsChunkPlugin之类的插件时），则应使用替代项来确保每个文件都具有唯一的名称。

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

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

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

我在本地开发环境中遇到此错误。对我来说，此错误的解决方案是强制重建文件。为此，我对我的一个CSS文件做了较小的更改。

我重新加载了浏览器，错误消失了。

使用Karma进行e2e时，Vue.js项目中出现相同的错误。该页面使用带有/dist/build.js的静态模板index.html进行服务。并在运行Karma时遇到此错误。

使用package.json发出Karma的命令是：

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

webpack.config.js中的输出配置为：

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

我的解决方案：受Evan Burbidge的回答启发，我在webpack.config.js的末尾附加了以下内容：

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

然后，它最终适用于页面投放和e2e。

我将目录中的index.html文件更改为解决此问题。（Webpack 5.1.3）/public/src