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

Question

本人webpack菜鸟，想了解一下。 我在运行 webpack 时遇到冲突，告诉我：

块 html 中的错误 [entry] app.js 冲突：多个资产发出相同的文件名 app.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]", } ] } };

Answer 1

我不太熟悉您的方法，所以我将向您展示一种常见的方法来帮助您。

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

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

其次，您可以使用html-webpack-plugin 。 您无需将其包含为test 。

Answer 2

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

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

这使得文件名不同并且不会发生冲突。

编辑：我最近发现的一件事是，如果使用 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'
};

那么应该可以与 HMR 一起正常工作:)

编辑 2018 年 7 月：

关于这方面的更多信息。

哈希这是每次 webpack 编译时生成的哈希，在开发模式下，这有利于开发期间的缓存清除，但不应用于文件的长期缓存。 这将覆盖项目的每个构建上的哈希。

Chunkhash如果您将它与运行时块一起使用，那么您可以将它用于长期缓存，运行时块将查看源代码中的更改并更新相应的块哈希。 它不会更新其他允许您的文件被缓存的人。

Answer 3

我有完全相同的问题。 问题似乎出现在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 文件注入其中。

Answer 4

升级到 Webpack 5 后我遇到了同样的问题。我的问题是由copy-webpack-plugin引起的。

下面是忽略指定文件的原始模式，它适用于 Webpack 4，但会引发 Webpack 5 错误。

冲突中的错误：多个资产向相同的文件名 default.hbs 发出不同的内容

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["default.hbs"]
          }
        },
      ]
    }),
   ],

要修复错误：

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["**/default.hbs"]
          }
        },
      ]
    }),
   ],

通过不忽略指定的文件，default.hbs（又名 index.html）被复制两次到构建（又名 /disk）目录中，从而有效地导致 Webpack 尝试将多个资产插入到“相同”（重复的）文件名中。

Answer 5

我有同样的问题，我在文档中找到了这些。

如果您的配置创建了多个“块”（例如使用多个入口点或使用 CommonsChunkPlugin 等插件时），则应使用替换来确保每个文件都有唯一的名称。

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

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

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

Answer 6

在我的情况下，源地图插件与提取迷你插件冲突。 在任何地方都找不到解决方案。 css 和 javascript 的源映射正在写入同一个文件。 这是我最终在我的项目中解决它的方法：

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

Answer 7

我在本地开发环境中遇到了这个错误。 对我来说，这个错误的解决方案是强制文件重建。 为此，我对我的一个 CSS 文件进行了细微更改。

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

Answer 8

我将index.html文件从/public目录更改为/src以解决此问题。 （Webpack 5.1.3）

Answer 9

在将我大约 2 年前制作的 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...部分下。

因此，当HtmlWebpackPlugin已经发出它们时，似乎现在不需要显式地将popup.html和options.html复制到输出文件夹。

Answer 10

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

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

Answer 11

使用 Karma 进行 e2e 时，Vue.js 项目中的相同错误。 该页面使用带有/dist/build.js的静态模板index.html提供。 并在运行 Karma 时出现此错误。

使用package.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。

Answer 12

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

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

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

问题是由fileloader的文件加载器引起的。 通过添加哈希name: '[name].[hash:8].[ext]'使其在每次 webpack 编译时都是唯一的。

提供以下代码：

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

}

Answer 13

如果您在Angular中遇到相同类型的错误

解决方案：删除.angular文件夹中的缓存文件夹并再次启动门户ng serve

Answer 14

webpack 5 解

在 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]'
  },