冲突:多个资源发送到同一文件名
我是一个想要了解它的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]",
}
]
}
};
回答 8
Stack Overflow用户
发布于 2017-02-10 11:43:45
我不太熟悉您的方法，因此我将向您展示一种帮助您解决问题的常用方法。
首先，在你的output，您正在指定filename至app.js这对我来说很有意义，因为输出仍然是app.js..。如果您想使其动态化，那么只需使用"filename": "[name].js"..。The[name]part将为您动态创建文件名。这就是你的目的entry作为一个对象。每个键都将用作一个名称，用来替换[name].js..。其次，您可以使用html-webpack-plugin..。您不需要将其作为test..。
Stack Overflow用户
发布于 2017-03-26 20:48:50
我也有同样的问题，我发现它设置了一个静态输出文件名，这导致了我的问题，在输出对象中尝试以下对象。
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年7月：
关于这方面的更多信息。
哈希这是每次webpack编译时产生的哈希值，在dev模式下，这对于开发期间的缓存破坏很好，但不应该用于文件的长期缓存。这将在您的项目的每个构建中覆盖Hash。
Chunkhash如果你将它与运行时块结合使用，那么你可以将它用于长期缓存，运行时块将看到你的源代码中发生了什么变化，并更新相应的块散列。它不会更新其他允许缓存你的文件的哈希。
Stack Overflow用户
发布于 2017-02-12 23:50:24
我也有同样的问题。这个问题似乎发生在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文件注入其中。
https://stackoverflow.com/questions/42148632
复制相似问题
腾讯云开发者
