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

我不是很熟悉你的方法，所以我会告诉你一个常见的方法来帮助你。

首先，在您的 output上，您将 filename指定为 app.js，这对我来说意味着输出仍然是 app.js。如果你想让它动态，那么只需使用 "filename": "[name].js"。

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

其次，你可以使用 html-webpack-plugin，你不需要把它作为一个 test包含进来。

我也有同样的问题。这个问题似乎发生在 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 文件注入其中。

我有同样的问题，我发现它是设置一个静态输出文件名导致我的问题，在输出对象尝试下面的对象。

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

这使得文件名是不同的，并且不会冲突。

编辑: 我最近发现，如果使用 HMR 重载，应该使用 hash 而不是 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 编译时生成的散列，在 dev 模式下，这对于开发过程中的缓存崩溃是有好处的，但是不应该用于文件的长期缓存。这将覆盖项目的每个构建上的 Hash。

春卡什 如果您将其与运行时块结合使用，那么您可以将其用于长期缓存，运行时块将查看源代码中发生的更改并更新相应的块散列。它不会更新其他允许缓存您的文件。

我也有同样的问题，我在文件里找到了这些。

如果您的配置创建了多个“块”(与多个入口点或者使用 CommonsChunkPlugin 这样的插件一样) ，那么您应该使用替换来确保每个文件都有一个唯一的名称。

• [name]被块的名称替换。
• [hash]被编译的散列替换。
• [chunkhash]被块的散列替换。

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


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

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

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

在 Vue.js 项目中使用 Karma 执行 e2e 时也出现了同样的错误。页面使用带有 /dist/build.js的静态模板 Html提供。运行卡玛时出现了错误。

使用 包裹 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文件从 /public目录更改为 /src以修复此问题(Webpack 5.1.3)

我也有同样的问题，因为我两年前做的一个 Chrome 扩展把所有的依赖关系都更新到了最新版本(比如 webpack 4-> 5) ，并且成功地解决了这个问题。

投诉中有两个文件(popup.html和 options.html)。以下是我的原始 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"]
}),
]
};

我通过删除以下内容解决了这个问题:

            { from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },

根据 new CopyPlugin...部分。

因此，现在似乎没有必要显式复制 popup.html和 options.html到输出文件夹时，HtmlWebpackPlugin已经发出它们。

在升级到 Webpack 5之后我也遇到了同样的问题，我的问题是由 Copy-webpack-plugin 复制-网络包-插件引起的。

下面是忽略指定文件的原始模式，它与 Webpack 4一起工作，但与 Webpack 5一起抛出一个错误。

冲突中的错误: 多个资产向同一资产发出不同的内容 文件名 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"]
}
},
]
}),
],

由于没有忽略指定的文件，default.hbs (a.k.a index.html)被两次复制到 build (a.k.a/disk)目录中，实际上导致 Webpack 试图将多个资产插入到“相同的”(重复的)文件名中。

在我的例子中，源映射插件与提取的 mini 插件有冲突。 在任何地方都找不到解决这个问题的办法。Css 和 javascript 的源映射写入同一个文件。下面是我最终在我的项目中解决这个问题的方法:

new webpack.SourceMapDevToolPlugin({
filename: '[name].[ext].map'
}),

与上面的文件加载器类似的解决方案，但是，我认为这个解决方案更加优雅。以前，我只是指定 [name]，添加 [path][name]解决了我的冲突，如下所示:

module: {
rules: [
{
test: /\.(mp4|m4s)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],

我在将 webpack 3升级到 webpack 4时也遇到过类似的问题。升级模块后，我遇到了这个错误。

冲突中的警告: 多个资产向相同的文件名 alert-icon. svg 发出不同的内容

冲突中的警告: 多个资产向相同的文件名 comment.svg 发出不同的内容

这个问题是由 fileloader对 svg 造成的。通过添加一个散列 name: '[name].[hash:8].[ext]'，使其在每次编译 webpack 时都是唯一的，从而解决了这个错误。

提供以下代码:

module: {
rules: [
{
test: /\.svg$/,
loader: 'file-loader',
query: {
name: '[name].[hash:8].[ext]'
}
]

}

如果在 角度中得到相同的类错误

解决方案: 删除 。棱角文件夹中的 缓存文件夹和 重新启动传送门

Webpack 5解决方案

在输出中添加 ChunkFilename和 AssetModuleFilename，如下所示。

  output: {
path: path.join(__dirname, "/build/"),
filename: "js/[name].[contenthash].js",
chunkFilename: 'chunks/[name].[chunkhash].js',
assetModuleFilename: 'media/[name][hash][ext][query]'
},