[英]Conflict: Multiple assets emit to the same filename
I'm a webpack rookie who wants to learn all about it.本人webpack菜鸟,想了解一下。 I came across a conflict when running my webpack telling me:
我在运行 webpack 时遇到冲突,告诉我:
ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js
块 html 中的错误 [entry] app.js 冲突:多个资产发出相同的文件名 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]", } ] } };
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 filename
to app.js
which makes sense for me that the output will still be app.js
.首先,在您的
output
中,您将filename
指定为app.js
,这对我来说很有意义,输出仍然是app.js
。 If you want to make it dynamic, then just use "filename": "[name].js"
.如果你想让它变得动态,那么只需使用
"filename": "[name].js"
。
The [name]
part will make the filename dynamic for you. [name]
部分将使您的文件名动态化。 That's the purpose of your entry
as an object.这就是您作为对象
entry
的目的。 Each key will be used as a name in replacement of the [name].js
.每个键将用作替换
[name].js
的名称。
And second, you can use the html-webpack-plugin
.其次,您可以使用
html-webpack-plugin
。 You don't need to include it as a test
.您无需将其包含为
test
。
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.编辑:我最近发现的一件事是,如果使用 HMR 重新加载,您应该使用哈希而不是 chunkhash。 I haven't dug into the root of the problem but I just know that using chunkhash was breaking my webpack config
我还没有深入研究问题的根源,但我只知道使用 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.关于这方面的更多信息。
Hash This 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.哈希这是每次 webpack 编译时生成的哈希,在开发模式下,这有利于开发期间的缓存清除,但不应用于文件的长期缓存。 This will overwrite the Hash on every build of your project.
这将覆盖项目的每个构建上的哈希。
Chunkhash If 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. Chunkhash如果您将它与运行时块一起使用,那么您可以将它用于长期缓存,运行时块将查看源代码中的更改并更新相应的块哈希。 It won't update others allowing for your files to be cached.
它不会更新其他允许您的文件被缓存的人。
I had exactly the same problem.我有完全相同的问题。 The problem seems to occur with the
file-loader
.问题似乎出现在
file-loader
上。 The error went away when I removed the html test and included html-webpack-plugin
instead to generate an index.html
file.当我删除 html 测试并包含
html-webpack-plugin
以生成index.html
文件时,错误消失了。 This is my webpack.config.js
file:这是我的
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 文件注入其中。
I had the same issue after upgrading to Webpack 5. My problem was caused by the copy-webpack-plugin .升级到 Webpack 5 后我遇到了同样的问题。我的问题是由copy-webpack-plugin引起的。
Below is the original pattern ignoring a specified file, it works with Webpack 4, but throws an error with Webpack 5.下面是忽略指定文件的原始模式,它适用于 Webpack 4,但会引发 Webpack 5 错误。
ERROR in Conflict: Multiple assets emit different content to the same filename default.hbs
冲突中的错误:多个资产向相同的文件名 default.hbs 发出不同的内容
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["default.hbs"]
}
},
]
}),
],
To fix the error:要修复错误:
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["**/default.hbs"]
}
},
]
}),
],
By not ignoring the specified file, the default.hbs (aka index.html) was copied twice into the build (aka /disk) directory effectively resulting in Webpack trying to insert multiple assets into the "same" (duplicated) filename.通过不忽略指定的文件,default.hbs(又名 index.html)被复制两次到构建(又名 /disk)目录中,从而有效地导致 Webpack 尝试将多个资产插入到“相同”(重复的)文件名中。
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.
如果您的配置创建了多个“块”(例如使用多个入口点或使用 CommonsChunkPlugin 等插件时),则应使用替换来确保每个文件都有唯一的名称。
[name]
is replaced by the name of the chunk.[name]
替换为块的名称。[hash]
is replaced by the hash of the compilation.[hash]
替换为编译的哈希值。[chunkhash]
is replaced by the hash of the chunk.[chunkhash]
被块的哈希替换。
output: {
path:__dirname+'/dist/js',
//replace filename:'app.js'
filename:'[name].js'
}
In my case the source map plugin was conflicting with the extract mini plugin.在我的情况下,源地图插件与提取迷你插件冲突。 Could not find a solution to this anywhere.
在任何地方都找不到解决方案。 source maps for css and javascript were writing to the same file.
css 和 javascript 的源映射正在写入同一个文件。 Here is how I finally solved it in my project:
这是我最终在我的项目中解决它的方法:
new webpack.SourceMapDevToolPlugin({
filename: '[name].[ext].map'
}),
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.我重新加载了浏览器,错误消失了。
I changed index.html
file from /public
directory to /src
to fix this issue.我将
index.html
文件从/public
目录更改为/src
以解决此问题。 (Webpack 5.1.3) (Webpack 5.1.3)
I had the same problem after updating all the dependencies to latest (eg webpack 4 -> 5) for a Chrome extension I made about 2 years ago, and managed to solve it.在将我大约 2 年前制作的 Chrome 扩展的所有依赖项更新到最新版本(例如 webpack 4 -> 5)后,我遇到了同样的问题,并设法解决了这个问题。
There were two files in the complaint ( popup.html
and options.html
).投诉中有两个文件(
popup.html
和options.html
)。 Here is my original webpack.config.js
file:这是我原来
webpack.config.js
文件:
const path = require('path'); const CopyPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { target: 'web', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, entry: { popup: './src/scripts/popup.tsx', options: './src/scripts/options.tsx', }, context: path.join(__dirname), module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ], }, resolve: { extensions: ['.tsx', '.ts', '.js', '.json', '.css'], }, plugins: [ new CleanWebpackPlugin(), new CopyPlugin([ { from: 'src/popup.html', to: 'popup.html' }, { from: 'src/options.html', to: 'options.html' }, { from: 'src/manifest.json', to: 'manifest.json' }, { from: 'src/icons', to: 'icons' }, ]), new HtmlWebpackPlugin({ template: path.join("src", "popup.html"), filename: "popup.html", chunks: ["popup"] }), new HtmlWebpackPlugin({ template: path.join("src", "options.html"), filename: "options.html", chunks: ["options"] }), ] };
I solved it by removing:我通过删除解决了它:
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
under new CopyPlugin...
part.在
new CopyPlugin...
部分下。
So seems like right now there is no need to explicitly copy popup.html
and options.html
to output folder when HtmlWebpackPlugin
is already emitting them.因此,当
HtmlWebpackPlugin
已经发出它们时,似乎现在不需要显式地将popup.html
和options.html
复制到输出文件夹。
Similar solution to the above with file-loader, however, I think this solution is the more elegant.与上面的文件加载器类似的解决方案,但是,我认为这个解决方案更优雅。 Before, I was only specifying the
[name]
, adding the [path][name]
resolved my conflict as below:之前,我只指定
[name]
,添加[path][name]
解决了我的冲突,如下所示:
module: {
rules: [
{
test: /\.(mp4|m4s)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
The same error in a Vue.js project when doing e2e with Karma.使用 Karma 进行 e2e 时,Vue.js 项目中的相同错误。 The page was served using a static template index.html with /dist/build.js .
该页面使用带有/dist/build.js的静态模板index.html提供。 And got this error running Karma.
并在运行 Karma 时出现此错误。
The command to issue Karma using package.json was:使用package.json发出 Karma 的命令是:
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
The output configuration in webpack.config.js was: 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。
I had a similar problem while upgrading webpack 3 to webpack 4. After upgrading the modules I came across this error.在将 webpack 3 升级到 webpack 4 时,我遇到了类似的问题。升级模块后,我遇到了这个错误。
WARNING in Conflict: Multiple assets emit different content to the same filename alert-icon.svg
冲突警告:多个资产向相同的文件名 alert-icon.svg 发出不同的内容
WARNING in Conflict: Multiple assets emit different content to the same filename comment.svg
冲突中的警告:多个资产向相同的文件名comment.svg 发出不同的内容
The problem was caused by fileloader
for svg.问题是由
fileloader
的文件加载器引起的。 Solved the error by adding a hash name: '[name].[hash:8].[ext]'
making it unique every time webpack compiles.通过添加哈希
name: '[name].[hash:8].[ext]'
使其在每次 webpack 编译时都是唯一的。
Provinding the code below:提供以下代码:
module: {
rules: [
{
test: /\.svg$/,
loader: 'file-loader',
query: {
name: '[name].[hash:8].[ext]'
}
]
} }
webpack 5 solution webpack 5 解
Add chunkFilename and assetModuleFilename in output as showed below.在 output 添加chunkFilename和assetModuleFilename如下图。
output: {
path: path.join(__dirname, "/build/"),
filename: "js/[name].[contenthash].js",
chunkFilename: 'chunks/[name].[chunkhash].js',
assetModuleFilename: 'media/[name][hash][ext][query]'
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.