Javascript 冲突：多个资产发出相同的文件名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42148632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conflict: Multiple assets emit to the same filename
提问by Andreasrein
I'm a webpack rookie who wants to learn all about it. I came across a conflict when running my webpack telling me:
我是一个 webpack 菜鸟，想了解它的一切。我在运行 webpack 时遇到了一个冲突，告诉我：
ERROR in chunk html [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js
ERROR in chunk html [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js
What should I do to avoid the conflict?
我应该怎么做才能避免冲突？
This is my webpack.config.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]",
}
]
}
};回答by ickyrr
i'm not quite familiar with your approach so I'll show you a common way to help you out.
我不太熟悉你的方法，所以我会告诉你一个常见的方法来帮助你。
First of all, on your output, you are specifying the filenameto app.jswhich makes sense for me that the output will still be app.js. If you want to make it dynamic, then just use "filename": "[name].js".
首先，在你的output，你都指定filename到app.js这是有道理的，我的输出仍然会app.js。如果你想让它动态，那么只需使用"filename": "[name].js".
The [name]part will make the filename dynamic for you. That's the purpose of your entryas an object. Each key will be used as a name in replacement of the [name].js.
该[name]部分将使文件名为您动态。这就是你entry作为一个对象的目的。每个键都将用作名称来代替[name].js.
And second, you can use the html-webpack-plugin. You don't need to include it as a test.
其次，您可以使用html-webpack-plugin. 您不需要将其作为test.
回答by Evan Burbidge
I had the same problem, I found it was setting a static output file name that was causing my problem, in the output object try the following object.
我遇到了同样的问题，我发现它正在设置导致我的问题的静态输出文件名，在输出对象中尝试以下对象。
output:{
filename: '[name].js',
path: __dirname + '/build',
chunkFilename: '[id].[chunkhash].js'
},
This makes it so that the filenames are different and it doesn't clash.
这使得文件名不同并且不会冲突。
EDIT: One thing i've recently found is that you should use a hash instead of chunkhash if using HMR reloading. I haven't dug into the root of the problem but I just know that using chunkhash was breaking my webpack config
编辑：我最近发现的一件事是，如果使用 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'
};
Should work fine with HMR then :)
应该可以与 HMR 一起使用 :)
EDIT July 2018:
2018 年 7 月编辑：
A little more information on this.
关于这一点的更多信息。
HashThis is a hash generated every time that webpack compiles, in dev mode this is good for cache busting during development but shouldn't be used for long term caching of your files. This will overwrite the Hash on every build of your project.
哈希这是每次 webpack 编译时生成的哈希，在开发模式下，这有利于开发期间的缓存破坏，但不应用于文件的长期缓存。这将在您的项目的每个构建中覆盖哈希。
ChunkhashIf you use this in conjunction with a runtime chunk then you can use it for long term caching, the runtime chunk will see what's changed in your source code and update the corresponding chunks hash's. It won't update others allowing for your files to be cached.
Chunkhash如果您将它与运行时块结合使用，那么您可以将其用于长期缓存，运行时块将查看源代码中的更改并更新相应的块哈希值。它不会更新其他人，允许缓存您的文件。
回答by lukastillmann
I had exactly the same problem. The problem seems to occur with the file-loader. The error went away when I removed the html test and included html-webpack-plugin instead to generate an index.html file. This is my webpack.config.jsfile:
我遇到了完全相同的问题。问题似乎发生在文件加载器上。当我删除 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]
}The html-webpack-plugin generates an index.html file and automatically injects the bundled js file into it.
html-webpack-plugin 生成一个 index.html 文件，并自动将捆绑的 js 文件注入其中。
回答by hxin
I had the same problem, and I found these in the documents.
我有同样的问题，我在文档中找到了这些。
If your configuration creates more than a single “chunk” (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.
[name]is replaced by the name of the chunk.[hash]is replaced by the hash of the compilation.[chunkhash]is replaced by the hash of the chunk.
如果您的配置创建了多个“块”（如使用多个入口点或使用 CommonsChunkPlugin 等插件时），您应该使用替换来确保每个文件都有一个唯一的名称。
[name]由块的名称替换。[hash]被编译的哈希替换。[chunkhash]被块的哈希替换。
output: {
path:__dirname+'/dist/js',
//replace filename:'app.js'
filename:'[name].js'
}
回答by MrGood
I encountered this error in my local dev environment. For me, the solution to this error was to force the files to rebuild. To do this, I made a minor change to one of my CSS files.
我在本地开发环境中遇到了这个错误。对我来说，这个错误的解决方案是强制重建文件。为此，我对我的一个 CSS 文件进行了微小的更改。
I reloaded my browser and the error went away.
我重新加载了浏览器，错误消失了。
回答by Juri Sinitson
The same error in a Vue.js project when doing e2e with Karma. The page was served using a static template index.htmlwith /dist/build.js. And got this error running Karma.
使用 Karma 进行 e2e 时，Vue.js 项目中出现相同的错误。该页面使用带有/dist/build.js的静态模板index.html提供。并在运行 Karma 时遇到此错误。
The command to issue Karma using package.jsonwas:
使用package.json发出 Karma 的命令是：
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
The output configuration in webpack.config.jswas:
webpack.config.js 中的输出配置是：
module.exports = {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
...
}
My solution: inspired by the Evan Burbidge's answer I appended the following at the end of webpack.config.js:
我的解决方案：受 Evan Burbidge 的回答启发，我在webpack.config.js的末尾附加了以下内容：
if (process.env.BABEL_ENV === 'test') {
module.exports.output.filename = '[name].[hash:8].js'
}
And then it eventually worked for both page serving and e2e.
然后它最终适用于页面服务和 e2e。
