Conflict: Multiple assets emit to the same filename app.js,如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (2560)

当我运行我的网络包时,我遇到了报错:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

我该怎么做才能避免冲突?

这是我的webpac.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]",
      }
    ]
  }
};
提问于
用户回答回答于

我对你的方法不太熟悉,所以我会给你介绍一种常见的方法来帮助你。

首先,你的output指定filenameapp.js。如果你想让它变得动态,那就用"filename": "[name].js"

其次,您可以使用html-webpack-plugin

用户回答回答于

这是我的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文件。

扫码关注云+社区

领取腾讯云代金券