Я новичок в 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]",
}
]
}
};
Conflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Ответы:
Я не совсем знаком с вашим подходом, поэтому я покажу вам общий способ помочь вам.
Прежде всего, на ваш
output
, вы указавfilename
наapp.js
что имеет смысл для меня , что выход все равно будетapp.js
. Если вы хотите сделать его динамичным, просто используйте"filename": "[name].js"
.Эта
[name]
часть сделает имя файла динамическим для вас. Это цель вашегоentry
объекта. Каждый ключ будет использоваться как имя вместо расширения[name].js
.Во-вторых, вы можете использовать расширение
html-webpack-plugin
. Вам не нужно включать его какtest
.источник
У меня была такая же проблема, я обнаружил, что это установка статического имени выходного файла, которое вызывает мою проблему, в выходном объекте попробуйте следующий объект.
output:{ filename: '[name].js', path: __dirname + '/build', chunkFilename: '[id].[chunkhash].js' },
Это делает так, что имена файлов разные и не конфликтуют.
РЕДАКТИРОВАТЬ: Одна вещь, которую я недавно обнаружил, заключается в том, что вы должны использовать хеш вместо chunkhash при использовании перезагрузки HMR. Я не вникал в корень проблемы, но просто знаю, что использование chunkhash нарушает мою конфигурацию веб-пакета
output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:8].js', sourceMapFilename: '[name].[hash:8].map', chunkFilename: '[id].[hash:8].js' };
Тогда должно работать нормально с HMR :)
ИЗМЕНИТЬ июль 2018 г .:
Еще немного информации об этом.
Хеш. Это хэш, который генерируется каждый раз при компиляции webpack. В режиме разработки он хорош для очистки кеша во время разработки, но не должен использоваться для длительного кеширования ваших файлов. Это перезапишет хэш при каждой сборке вашего проекта.
Chunkhash Если вы используете это в сочетании с фрагментом времени выполнения, вы можете использовать его для долгосрочного кэширования, фрагмент времени выполнения увидит, что изменилось в вашем исходном коде, и обновит хэши соответствующих фрагментов. Он не будет обновлять другие, позволяя кэшировать ваши файлы.
источник
У меня была точно такая же проблема. Проблема, похоже, связана с расширением
file-loader
. Ошибка исчезла, когда я удалил 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.
источник
HTMLWebpackPlugin
илиhtml-loader
другое, но не то и другое одновременно.У меня была такая же проблема, и я нашел их в документах.
output: { path:__dirname+'/dist/js', //replace filename:'app.js' filename:'[name].js' }
источник
Я столкнулся с этой ошибкой в своей локальной среде разработки. Для меня решением этой ошибки было принудительное восстановление файлов. Для этого я внес небольшие изменения в один из моих файлов CSS.
Я перезагрузил браузер, и ошибка исчезла.
источник
Та же ошибка в проекте Vue.js при выполнении e2e с Karma. Страница обслуживалась с использованием статического шаблона index.html с /dist/build.js . И получил эту ошибку при запуске Кармы.
Команда для выдачи Karma с использованием package.json была:
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
Конфигурация вывода в webpack.config.js была:
module.exports = { output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, ... }
Мое решение: вдохновленный ответом Эвана Бербиджа, я добавил следующее в конец webpack.config.js :
if (process.env.BABEL_ENV === 'test') { module.exports.output.filename = '[name].[hash:8].js' }
И затем это в конечном итоге сработало как для обслуживания страниц, так и для e2e.
источник
Я изменил
index.html
файл из/public
каталога на,/src
чтобы исправить эту проблему. (Webpack 5.1.3)источник