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

我是一个Webpack新手,想了解所有相关知识。我在运行Webpack时告诉我:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename 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]",
      }
    ]
  }
};

村村2020/03/23 14:37:35

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

首先,在你的output,你都指定filenameapp.js这是有道理的,我的输出仍然会app.js如果要使其动态化,请使用"filename": "[name].js"

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

其次,您可以使用html-webpack-plugin您无需将其作为test

十三2020/03/23 14:37:35

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

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