我是一个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]", } ] } };
我对您的方法不太熟悉,所以我将向您展示一种帮助您的常见方法。
首先,在你的output,你都指定filename到app.js这是有道理的,我的输出仍然会app.js。如果要使其动态化,请使用"filename": "[name].js"。
output
filename
app.js
"filename": "[name].js"
该[name]部分将使文件名动态化。那就是您entry作为对象的目的。每个密钥都将用作替换的名称[name].js。
[name]
entry
[name].js
其次,您可以使用html-webpack-plugin。您不需要将其作为test。
html-webpack-plugin
test