entityMap|blocks|key|4tjh0|text|我不太熟悉您的方法，因此我将向您展示一种帮助您解决问题的常用方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9mo8s|首先，在你的output，您正在指定filename至app.js这对我来说很有意义，因为输出仍然是app.js..。如果您想使其动态化，那么只需使用"filename":+"[name].js"..。The[name]part将为您动态创建文件名。这就是你的目的entry作为一个对象。每个键都将用作一个名称，用来替换[name].js..。其次，您可以使用html-webpack-plugin..。您不需要将其作为test..。|offset|length|style|CODE^0|0|6|6|I|8|R|6|1E|6|23|N|2W|6|3O|5|4G|9|50|J|5U|4^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@$E|K|F|L|G|H]|$E|M|F|N|G|H]|$E|O|F|P|G|H]|$E|Q|F|R|G|H]|$E|S|F|T|G|H]|$E|U|F|V|G|H]|$E|W|F|X|G|H]|$E|Y|F|Z|G|H]|$E|10|F|11|G|H]|$E|12|F|13|G|H]]|A|@]|B|$]]]]

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 <code>output</code>, you are specifying the <code>filename</code> to <code>app.js</code> which makes sense for me that the output will still be <code>app.js</code>. If you want to make it dynamic, then just use <code>"filename": "[name].js"</code>.

The <code>[name]</code> part will make the filename dynamic for you. That's the purpose of your <code>entry</code> as an object. Each key will be used as a name in replacement of the <code>[name].js</code>.

And second, you can use the <code>html-webpack-plugin</code>. You don't need to include it as a <code>test</code>.

entityMap|blocks|key|f6ofu|text|我也有同样的问题。这个问题似乎发生在file-loader..。当我删除html测试并包含以下内容时，这个错误就消失了。html-webpack-plugin而是生成一个index.html文件。这是我的webpack.config.js文件：​|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|f4ke0|var+path+=+require('path');

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

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

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

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

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

++plugins:+[HTMLWebpackPluginConfig]
}|code-block|syntax|javascript|16sa5|​|31vh4|html-webpack-plugin生成一个index.html文件，并自动将捆绑的js文件注入其中。^0|I|B|1O|J|2D|A|2U|H|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]|$A|S|B|T|C|D]|$A|U|B|V|C|D]|$A|W|B|X|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|Y|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|Z|9|@]|E|@]|F|$]]|$2|N|4|O|6|7|8|10|9|@]|E|@]|F|$]]]]

I had exactly the same problem. The problem seems to occur with the <code>file-loader</code>. The error went away when I removed the html test and included <code>html-webpack-plugin</code> instead to generate an <code>index.html</code> file. This is my <code>webpack.config.js</code> file:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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]
}</code></pre>
</div>
</div>

The html-webpack-plugin generates an index.html file and automatically injects the bundled js file into it.

entityMap|blocks|key|3fbja|text|我也有同样的问题，我发现它设置了一个静态输出文件名，这导致了我的问题，在输出对象中尝试以下对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7fdmt|output:{
++++++++filename:+'[name].js',
++++++++path:+__dirname+%2B+'/build',
++++++++chunkFilename:+'[id].[chunkhash].js'
++++},|code-block|syntax|javascript|ci5oj|这使得文件名不同，并且不会发生冲突。|98kfb|编辑:我最近发现的一件事是，如果使用HMR重载，你应该使用散列而不是块散列。我没有深入研究问题的根源，但我只知道使用chunkhash会破坏我的webpack配置|5cv4h|output:+{
++path:+path.resolve(__dirname,+'dist'),
++filename:+'[name].[hash:8].js',
++sourceMapFilename:+'[name].[hash:8].map',
++chunkFilename:+'[id].[hash:8].js'
};|1o84h|那么HMR应该可以很好地工作:)|jji2|编辑2018年7月：|offset|length|style|BOLD|c1q23|关于这方面的更多信息。|d83h6|哈希这是每次webpack编译时产生的哈希值，在dev模式下，这对于开发期间的缓存破坏很好，但不应该用于文件的长期缓存。这将在您的项目的每个构建中覆盖Hash。|5t7sa|Chunkhash如果你将它与运行时块结合使用，那么你可以将它用于长期缓存，运行时块将看到你的源代码中发生了什么变化，并更新相应的块散列。它不会更新其他允许缓存你的文件的哈希。^0|0|0|0|0|0|0|0|A|0|0|0|2|0|0|9^^$0|$]|1|@$2|3|4|5|6|7|8|11|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|12|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|13|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|14|9|@]|A|@]|B|$]]|$2|L|4|M|6|E|8|15|9|@]|A|@]|B|$F|G]]|$2|N|4|O|6|7|8|16|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|17|9|@$R|18|S|19|T|U]]|A|@]|B|$]]|$2|V|4|W|6|7|8|1A|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1B|9|@$R|1C|S|1D|T|U]]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1E|9|@$R|1F|S|1G|T|U]]|A|@]|B|$]]]]

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.

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

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

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

Should work fine with HMR then :) 

EDIT July 2018:

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. 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. It won't update others allowing for your files to be cached.

entityMap|blocks|key|2iqv1|text|我也有同样的问题，我在文档中找到了这些。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7b657|如果您的配置创建了多个“块”(例如使用多个入口点或使用CommonsChunkPlugin之类的插件)，则应该使用替换来确保每个文件都有一个唯一的名称。|blockquote|8t0gl|[name]替换为区块的名称。|unordered-list-item|offset|length|style|CODE|e1ri4|[hash]替换为编译的哈希。|4890l|[chunkhash]替换为区块的哈希。|bkk67|output:+{
++++path:__dirname%2B'/dist/js',

++++//replace+filename:'app.js'+
++++filename:'[name].js'
}|code-block|syntax|javascript^0|0|0|0|6|0|0|6|0|0|B|0^^$0|$]|1|@$2|3|4|5|6|7|8|V|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|W|9|@]|A|@]|B|$]]|$2|F|4|G|6|H|8|X|9|@$I|Y|J|Z|K|L]]|A|@]|B|$]]|$2|M|4|N|6|H|8|10|9|@$I|11|J|12|K|L]]|A|@]|B|$]]|$2|O|4|P|6|H|8|13|9|@$I|14|J|15|K|L]]|A|@]|B|$]]|$2|Q|4|R|6|S|8|16|9|@]|A|@]|B|$T|U]]]]

I had the same problem, and I found these in the documents.

<blockquote>
 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.
 
 <ul>
 <li><code>[name]</code> is replaced by the name of the chunk.</li>
 <li><code>[hash]</code> is replaced by the hash of the compilation.</li>
 <li><code>[chunkhash]</code> is replaced by the hash of the chunk.</li>
 </ul>
</blockquote>

<pre><code> output: {
 path:__dirname+'/dist/js',

 //replace filename:'app.js' 
 filename:'[name].js'
}
</code></pre>

entityMap|blocks|key|1pfjg|text|我在本地开发环境中遇到了这个错误。对我来说，这个错误的解决方案是强制文件重建。为此，我对我的一个CSS文件进行了微小的更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1707a|我重新加载了浏览器，错误消失了。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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.

I reloaded my browser and the error went away.

entityMap|blocks|key|cqsim|text|在使用Karma执行e2e时，在Vue.js项目中也会出现同样的错误。该页面是使用静态模板提供的index.html使用/dist/build.js..。并在运行Karma时出现此错误。发出Karma的命令使用package.json是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8sfdk|"test":+"cross-env+BABEL_ENV=test+CHROME_BIN=$(which+chromium-browser)+karma+start+--single-run"|code-block|syntax|js|3shga|中的输出配置webpack.config.js是：|5uvpg|module.exports+=+{
++output:+{
+++path:+path.resolve(__dirname,+'./dist'),
+++publicPath:+'/dist/',
+++filename:+'build.js'
++},
++...
+}|javascript|1g1cv|我的解决方案:受Evan+Burbidge的回答的启发，我在结尾处附加了以下内容webpack.config.js|9j877|if+(process.env.BABEL_ENV+===+'test')+{
++module.exports.output.filename+=+'[name].[hash:8].js'
}|9pl6u|然后，它最终对页面服务和e2e都起到了作用。^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|S|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|T|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|U|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|V|9|@]|A|@]|B|$F|L]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]|$2|O|4|P|6|E|8|X|9|@]|A|@]|B|$F|L]]|$2|Q|4|R|6|7|8|Y|9|@]|A|@]|B|$]]]]

The same error in a Vue.js project when doing e2e with Karma. The page was served using a static template index.html with /dist/build.js. And got this error running Karma.

The command to issue Karma using package.json was:

<pre><code>"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
</code></pre>

The output configuration in webpack.config.js was:

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

My solution: inspired by the Evan Burbidge's answer I appended the following at the end of webpack.config.js:

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

And then it eventually worked for both page serving and e2e.

entityMap|blocks|key|caea5|text|我变了index.html文件来源/public目标目录/src要解决此问题，请执行以下操作。(Webpack+5.1.3)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|3|A|H|7|S|4^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]|$A|J|B|K|C|D]|$A|L|B|M|C|D]]|E|@]|F|$]]]]

I changed <code>index.html</code> file from <code>/public</code> directory to <code>/src</code> to fix this issue. (Webpack 5.1.3)

entityMap|blocks|key|5ktl3|text|大约2年前我做了一个Chrome扩展，将所有的依赖更新到最新(例如webpack+4+->+5)后，我也遇到了同样的问题，并设法解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c3n3r|起诉书中有两份文件(popup.html和options.html)。这是我的原稿webpack.config.js文件：|offset|length|style|CODE|agvah|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"]
++++++++}),
++++]
};|code-block|syntax|javascript|9o518|​|48ojr|我通过删除以下代码解决了这个问题：|9vjf3|{+from:+'src/popup.html',+to:+'popup.html'+},
++++++++++++{+from:+'src/options.html',+to:+'options.html'+},|1sgss|在new+CopyPlugin...部分。因此，现在似乎没有必要显式地复制popup.html和options.html在以下情况下输出文件夹HtmlWebpackPlugin已经在释放它们了。^0|0|A|A|L|C|15|H|0|0|0|0|0|1|H|11|A|1C|C|1Z|H^^$0|$]|1|@$2|3|4|5|6|7|8|V|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|W|9|@$E|X|F|Y|G|H]|$E|Z|F|10|G|H]|$E|11|F|12|G|H]]|A|@]|B|$]]|$2|I|4|J|6|K|8|13|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|14|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|15|9|@]|A|@]|B|$]]|$2|R|4|S|6|K|8|16|9|@]|A|@]|B|$L|M]]|$2|T|4|U|6|7|8|17|9|@$E|18|F|19|G|H]|$E|1A|F|1B|G|H]|$E|1C|F|1D|G|H]|$E|1E|F|1F|G|H]]|A|@]|B|$]]]]

I had the same problem after updating all the dependencies to latest (e.g. webpack 4 -&gt; 5) for a Chrome extension I made about 2 years ago, and managed to solve it.
There were two files in the complaint (<code>popup.html</code> and <code>options.html</code>). Here is my original <code>webpack.config.js</code> file:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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"]
 }),
 ]
};</code></pre>
</div>
</div>

I solved it by removing:
<pre><code> { from: 'src/popup.html', to: 'popup.html' },
 { from: 'src/options.html', to: 'options.html' },
</code></pre>
under <code>new CopyPlugin...</code> part.
So seems like right now there is no need to explicitly copy <code>popup.html</code> and <code>options.html</code> to output folder when <code>HtmlWebpackPlugin</code> is already emitting them.

I'm a webpack rookie who wants to learn all about it.
I came across a conflict when running my webpack telling me:
<blockquote>
ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to
the same filename app.js
</blockquote>
What should I do to avoid the conflict?
This is my webpack.config.js:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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]",
 }
 ]
 }
};</code></pre>
</div>
</div>

Conflict: Multiple assets emit to the same filename

 我是一个想要了解它的webpack新手。当我运行我的webpack时，我遇到了一个冲突，告诉我： ERROR in chunk html [entry]  app.js  Conflict: Multiple assets emit to the same filename app.js 我应该怎么做才能避免冲突？ ...

问冲突:多个资源发送到同一文件名
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问冲突:多个资源发送到同一文件名EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问冲突:多个资源发送到同一文件名
EN