Конфликт: несколько активов выбрасываются в одно и то же имя файла

Question

Я новичок в веб-паке, который хочет узнать все об этом. я наткнулся на конфликт, когда работает мой 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]", 
 
     } 
 
    ] 
 
    } 
 
};

Answer 1

я не совсем знаком с вашим подходом, так что я покажу вам общий способ, чтобы помочь вам.

Прежде всего, на вашем output, вы указав filename к app.js, который имеет смысл для меня, что выход все равно будет app.js. Если вы хотите сделать его динамичным, просто используйте "filename": "[name].js".

Часть [name] сделает динамическое имя файла для вас. Это цель вашего entry как объекта. Каждый ключ будет использоваться в качестве имени для замены [name].js.

И, во-вторых, вы можете использовать html-webpack-plugin. Вам не нужно включать его как test.

Answer 2

У меня была точно такая же проблема. Проблема, похоже, возникает с файловым загрузчиком. Ошибка исчезла, когда я удалил 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 файл в ней.

Answer 3

У меня была такая же проблема, я обнаружил, что это задание статического имени выходного файла, вызывающего мою проблему, в выходном объекте попробуйте следующий объект.

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

Это делает его так, что имена файлов разные, и они не сталкиваются.

EDIT: Одна вещь, которую я недавно нашел, заключается в том, что вы должны использовать хеш вместо chunkhash при использовании перезагрузки HMR. Я не копал в корень проблемы, но я просто знаю, что с помощью chunkhash ломится мой WebPack конфигурации

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

Должно работать нормально с ГМР тогда :)

Answer 4

У меня была такая же проблема, и я нашел их в документах.

Если конфигурация создает более одного «куска» (как с несколькими точками входа или при использовании плагинов как CommonsChunkPlugin), вы должны использовать замены, чтобы гарантировать, что каждый файл имеет уникальное имя.

• [name] заменяется на название куска.
• [hash] заменен хешем компиляции.
• [chunkhash] заменен на хэш куска.

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

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