Javascript 冲突：多个资源发射到同一文件名

我是一个网页新手，想了解它的一切。 我在运行我的网页时遇到了冲突，告诉我：

chunk html[entry]app.js冲突中出错：多个资产向 相同的文件名app.js

我应该如何避免冲突

这是我的webpack.config.js：

module.exports={
上下文：uuu dirname+“/app”，
条目：{
“javascript'：”/js/app.js“，
“html”：“/index.html”，
},
输出：{
路径：uu dirname+“/dist”，
文件名：“app.js”，
},
决心：{
扩展：['.js'，'.jsx'，'.json']
},
模块：{
装载机：[
{
测试：/\.jsx？$/,，
排除：/node_模块/，
装载机：[“巴别塔装载机”]
},
{
测试：/\.html$/,，
加载器：“文件加载器？名称=[name].[ext]”，
}
]
}
};我不太熟悉您的方法，因此我将向您展示一种帮助您解决问题的常用方法

首先，在您的
输出上
，您将
文件名
指定为
app.js
，这对我来说很有意义，输出仍然是
app.js
。如果您想使其动态化，那么只需使用
“filename”：“[name].js”

[name]
部分将使文件名为动态文件名。这就是您的
条目作为对象的目的。每个键都将用作一个名称来替换
[name].js

其次，您可以使用
html网页包插件
。您不需要将其作为
测试
 我也有同样的问题。问题似乎发生在
文件加载器上。当我删除html测试并包含
HTMLWebpack插件来生成
index.html
文件时，错误消失了。这是我的
webpack.config.js
文件：


var path=require（'path'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）；
var HTMLWebpackPluginConfig=new HtmlWebpackPlugin({
模板：_dirname+'/app/index.html'，
文件名：“index.html”，
注射：“身体”
})
module.exports={
条目：{
javascript:“./app/index.js”，
},  
输出：{
文件名：“bundle.js”，
路径：_dirname+'/dist'
},  
模块：{
规则：[
{   
测试：/\.jsx？$/,，
排除：[
解析（uuu dirname，“/node_umodules/”）
],  
加载器：“巴别塔加载器”
},  
]   
},  
决心：{
扩展：['.js'，'.jsx'，'.json']
},  
插件：[HTMLWebpackPluginConfig]
}
我也遇到了同样的问题，我发现是设置了一个静态输出文件名导致了我的问题，请在输出对象中尝试以下对象

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

这使得文件名不同，不会发生冲突

编辑：
我最近发现的一件事是，如果使用HMR重新加载，应该使用哈希而不是chunkhash。我还没有找到问题的根源，但我只知道使用chunkhash破坏了我的网页配置

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
如果将其与运行时块结合使用，则可以将其用于长期缓存，运行时块将查看源代码中的更改并更新相应的块散列。它不会更新其他允许缓存您的文件的文件
 我也有同样的问题，我在文档中找到了这些问题

如果您的配置创建了多个“块”（与多个入口点或使用诸如CommonChunkPlugin之类的插件时一样），您应该使用替换来确保每个文件具有唯一的名称


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

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

我重新加载了浏览器，错误消失了。
使用Karma执行e2e时，Vue.js项目中出现了相同的错误。该页面使用带有/dist/build.js的静态模板index.html提供。让这个错误运行Karma

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

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

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

然后它最终对页面服务和e2e都有效。
我将
index.html
文件从
/public
目录更改为
/src
，以解决此问题。（Webpack 5.1.3）
我在将Chrome扩展的所有依赖项更新为最新版本（例如Webpack 4->5）后遇到了相同的问题，我在大约2年前制作了一个Chrome扩展，并设法解决了这个问题

投诉中有两个文件（
popup.html
和
options.html
）。这是我的原始
webpack.config.js
文件：
const path=require（'path'）；
const CopyPlugin=require（'copy-webpack-plugin'）；
const HtmlWebpackPlugin=require（“html网页包插件”）；
const{CleanWebpackPlugin}=require（“CleanWebpackPlugin”）；
module.exports={
目标：“网络”，
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：'[name].js'，
},
条目：{
弹出窗口：'./src/scripts/popup.tsx'，
选项：'./src/scripts/options.tsx'，
},
上下文：path.join（uu dirname），
模块：{
规则：[
{
测试：/\。
 output: {
    path:__dirname+'/dist/js',

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

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

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

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