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

javascript node.js webpack config conflict

2022-08-30 04:17:59

我是一个网络包新手，想要了解它的全部知识。我在运行我的网络包时遇到了冲突，告诉我：

块 html [条目] 应用中的错误.js冲突：多个资产发送到同一文件名应用.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]",
      }
    ]
  }
};

答案 1

我不太熟悉你的方法，所以我会告诉你一个共同的方法来帮助你。

首先，在您的上，您正在指定对我来说有意义的输出仍然是。如果要使其动态化，则只需使用.outputfilenameapp.jsapp.js"filename": "[name].js"

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

其次，您可以使用 .您无需将其作为 .html-webpack-plugintest

答案 2

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

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

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

编辑：我最近发现的一件事是，如果使用HMR重新加载，您应该使用哈希而不是块哈希。我还没有深入研究问题的根源，但我只知道使用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：

有关这方面的更多信息。

散列这是每次 webpack 编译时生成的哈希值，在开发模式下，这适用于开发过程中的缓存破坏，但不应用于文件的长期缓存。这将覆盖项目每次生成时的哈希值。

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