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

我是一个想学习所有关于它的networking新手。 运行我的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]", } ] } }; 

我不太了解你的方法,所以我会告诉你一个常用的方法来帮助你。

首先,在你的output ,你指定了app.jsfilename ,这对我来说意味着输出仍然是app.js 如果你想使它成为dynamic的,那么只需使用"filename": "[name].js"

[name]部分将使您的文件名变为dynamic。 这是你作为一个对象entry的目的。 每个键将被用作replace[name].js

其次,你可以使用html-webpack-plugin 。 你不需要把它作为一个test

我有完全一样的问题。 这个问题似乎与文件加载器发生。 当我删除htmltesting并包含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] } 

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

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

这使得它的文件名是不同的,它不会发生冲突。

编辑:我最近发现的一件事是,如果使用HMR重新加载,你应该使用散列而不是chunkhash。 我没有深入到问题的根源,但我只知道使用chunkhash打破了我的webpackconfiguration

 output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:8].js', sourceMapFilename: '[name].[hash:8].map', chunkFilename: '[id].[hash:8].js' }; 

应该与HMR工作正常:)

我有同样的问题,我发现在文件中。

如果您的configuration创build多个“块”(如使用多个入口点或使用像CommonsChunkPlugin这样的插件),则应使用replace来确保每个文件具有唯一的名称。

  • [name]由块的名称replace。
  • [hash]被编译的散列replace。
  • [chunkhash]被chunk的散列replace。
  output: { path:__dirname+'/dist/js', //replace filename:'app.js' filename:'[name].js' }