私は webpack の初心者で、webpack についてすべて学びたいと思っています。webpack を実行中に、次のような競合が発生しました。
チャンク html [エントリ] app.js のエラー 競合: 複数のアセットが同じファイル名 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]",
}
]
}
};ベストアンサー1
あなたのアプローチにはあまり詳しくないので、一般的な方法をお見せしてお手伝いします。
まず、 では、をにoutput指定していますが、出力は のままになると思います。 動的にしたい場合は、 を使用してください。filenameapp.jsapp.js"filename": "[name].js"
部分[name]はファイル名を動的にします。これが、オブジェクトとしての の目的ですentry。各キーは、 の代わりに名前として使用されます[name].js。
2 番目に、 を使用できますhtml-webpack-plugin。 として含める必要はありませんtest。