衝突：多個資產發射到相同的文件名

我是一個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]", 
 
     } 
 
    ] 
 
    } 
 
};

來源

2017-02-09 Storkfan

我不太熟悉你的方法，所以我會告訴你一個共同的方式來幫助你。

首先，在你output，你指定filename到app.js這是有道理的，我說的輸出仍然是app.js。如果你想使它動態化，那麼只需使用"filename": "[name].js"即可。

[name]部分將使您的文件名變爲動態。這就是您的entry作爲對象的目的。每個鍵將被用作替代的名稱。其次，您可以使用html-webpack-plugin。您不需要將其包含爲test。

來源

2017-02-10 03:43:44 ickyrr

這將是巨大的，如果這有匹配的原始 –

我有完全相同的問題。該問題似乎與文件加載器發生。當我刪除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-插件生成index.html文件，並自動捆綁的js文件注入到它。

來源

2017-02-12 15:50:23 lukastillmann

這解決了我的問題，也是一個樣品。看起來你可以擁有'HTMLWebpackPlugin'或'html-loader'，但不能同時擁有這兩者。 –

我有同樣的問題，我發現它是設置一個靜態輸出文件名稱，導致我的問題，在輸出對象中嘗試以下對象。

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

這使得它的文件名是不同的，它不會發生衝突。

編輯：我最近發現的一件事是，如果使用HMR重裝，你應該使用散列而不是chunkhash。我沒有挖成問題的根源，但我只知道，使用chunkhash被打破我的WebPack配置

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

能很好地工作HMR然後:)

來源

2017-03-26 12:48:50

我有同樣的問題，我在文件中找到這些。

如果您的配置創建多個「塊」（如多個入口點或使用像CommonsChunkPlugin這樣的插件），則應使用替換來確保每個文件具有唯一的名稱。

[name]被塊的名稱替換。

[hash]被編譯的散列替換。

[chunkhash]被塊的散列代替。

output: { 
    path:__dirname+'/dist/js', 

    //replace filename:'app.js' 
    filename:'[name].js' 
}

來源

2017-07-08 13:34:22 hxin

衝突：多個資產發射到相同的文件名

回答

相關問題