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

我是一个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

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

回答

相关问题