Ik ben een beginnend webpacker die er alles over wil leren.
Ik kwam een conflict tegen tijdens het uitvoeren van mijn webpack en vertelde me:
FOUT in chunk html [entry] app.js Conflict: meerdere items verzenden naar
dezelfde bestandsnaam app.js
Wat moet ik doen om het conflict te voorkomen?
Dit is mijn 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]",
}
]
}
};
Antwoord 1, autoriteit 100%
Ik ben niet helemaal bekend met uw aanpak, dus ik zal u een veelvoorkomende manier laten zien om u te helpen.
Allereerst geef je op je output
de filename
op voor app.js
, wat logisch is voor mij dat de uitvoer nog steeds app.js
zijn. Als je het dynamisch wilt maken, gebruik dan gewoon "filename": "[name].js"
.
Het gedeelte [name]
maakt de bestandsnaam dynamisch voor u. Dat is het doel van uw entry
als object. Elke sleutel wordt gebruikt als een naam ter vervanging van de [name].js
.
En ten tweede kun je de html-webpack-plugin
gebruiken. Je hoeft het niet als een test
op te nemen.
Antwoord 2, autoriteit 28%
Ik had hetzelfde probleem, ik ontdekte dat het een statische uitvoerbestandsnaam instelde die mijn probleem veroorzaakte, probeer in het uitvoerobject het volgende object.
output:{
filename: '[name].js',
path: __dirname + '/build',
chunkFilename: '[id].[chunkhash].js'
},
Dit zorgt ervoor dat de bestandsnamen verschillend zijn en niet botsen.
BEWERKEN:
Een ding dat ik onlangs heb ontdekt, is dat je een hash moet gebruiken in plaats van chunkhash als je HMR-herladen gebruikt. Ik heb me niet verdiept in de oorzaak van het probleem, maar ik weet gewoon dat het gebruik van chunkhash mijn webpack-configuratie brak
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:8].js',
sourceMapFilename: '[name].[hash:8].map',
chunkFilename: '[id].[hash:8].js'
};
Zou dan prima moeten werken met HMR 🙂
BEWERK juli 2018:
Een beetje meer informatie hierover.
Hash
Dit is een hash die elke keer dat het webpack wordt gecompileerd wordt gegenereerd. In dev-modus is dit goed voor cache-busting tijdens de ontwikkeling, maar mag niet worden gebruikt voor langdurige caching van uw bestanden. Dit zal de hash op elke build van je project overschrijven.
Chunkhash
Als je dit gebruikt in combinatie met een runtime-chunk, dan kun je het gebruiken voor caching op lange termijn, de runtime-chunk zal zien wat er is veranderd in je broncode en de overeenkomstige chunks-hash’s bijwerken. Het zal anderen niet updaten, waardoor uw bestanden in de cache kunnen worden opgeslagen.
Antwoord 3, autoriteit 11%
Ik had precies hetzelfde probleem. Het probleem lijkt zich voor te doen met de file-loader
. De fout verdween toen ik de html-test verwijderde en in plaats daarvan html-webpack-plugin
toevoegde om een index.html
-bestand te genereren. Dit is mijn webpack.config.js
-bestand:
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]
}
Antwoord 4, autoriteit 6%
Ik had hetzelfde probleem en ik vond deze in de documenten.
Als uw configuratie meer dan één “chunk” maakt (zoals bij meerdere toegangspunten of bij het gebruik van plug-ins zoals CommonsChunkPlugin), moet u vervangingen gebruiken om ervoor te zorgen dat elk bestand een unieke naam heeft.
[name]
wordt vervangen door de naam van de chunk.[hash]
wordt vervangen door de hash van de compilatie.[chunkhash]
wordt vervangen door de hash van de chunk.
output: {
path:__dirname+'/dist/js',
//replace filename:'app.js'
filename:'[name].js'
}
Antwoord 5, autoriteit 5%
Ik had hetzelfde probleem na het upgraden naar Webpack 5. Mijn probleem werd veroorzaakt door de copy-webpack-plugin.
Hieronder is het originele patroon dat een gespecificeerd bestand negeert, het werkt met Webpack 4, maar geeft een fout met Webpack 5.
FOUT in conflict: meerdere middelen zenden verschillende inhoud naar hetzelfde uit
bestandsnaam default.hbs
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["default.hbs"]
}
},
]
}),
],
Om de fout te herstellen:
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["**/default.hbs"]
}
},
]
}),
],
Door het opgegeven bestand niet te negeren, is de default.hbs (ook bekend als index.html) twee keer gekopieerd naar de build (ook bekend als /disk) directory, wat er in feite toe leidde dat Webpack probeerde meerdere activa in de “dezelfde” (gedupliceerde) bestandsnaam in te voegen .
Antwoord 6, autoriteit 2%
Ik ben deze fout tegengekomen in mijn lokale ontwikkelomgeving. Voor mij was de oplossing voor deze fout om de bestanden te dwingen opnieuw op te bouwen. Hiervoor heb ik een kleine wijziging aangebracht in een van mijn CSS-bestanden.
Ik heb mijn browser opnieuw geladen en de fout is verdwenen.
Antwoord 7, autoriteit 2%
In mijn geval was de source map-plug-in in strijd met de extract mini-plug-in.
Nergens een oplossing hiervoor kunnen vinden. bronkaarten voor css en javascript waren naar hetzelfde bestand aan het schrijven. Hier is hoe ik het uiteindelijk heb opgelost in mijn project:
new webpack.SourceMapDevToolPlugin({
filename: '[name].[ext].map'
}),
Antwoord 8
Ik heb het bestand index.html
van de directory /public
gewijzigd in /src
om dit probleem op te lossen. (Webpack 5.1.3)
Antwoord 9
Ik had hetzelfde probleem nadat ik alle afhankelijkheden had bijgewerkt naar de nieuwste versie (bijv. webpack 4 -> 5) voor een Chrome-extensie die ik ongeveer 2 jaar geleden heb gemaakt, en ik heb het kunnen oplossen.
Er waren twee bestanden in de klacht (popup.html
en options.html
). Hier is mijn originele bestand webpack.config.js
:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
entry: {
popup: './src/scripts/popup.tsx',
options: './src/scripts/options.tsx',
},
context: path.join(__dirname),
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json', '.css'],
},
plugins: [
new CleanWebpackPlugin(),
new CopyPlugin([
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
{ from: 'src/manifest.json', to: 'manifest.json' },
{ from: 'src/icons', to: 'icons' },
]),
new HtmlWebpackPlugin({
template: path.join("src", "popup.html"),
filename: "popup.html",
chunks: ["popup"]
}),
new HtmlWebpackPlugin({
template: path.join("src", "options.html"),
filename: "options.html",
chunks: ["options"]
}),
]
};
Antwoord 10
Dezelfde fout in een Vue.js-project bij het doen van e2e met Karma. De pagina werd weergegeven met behulp van een statische sjabloon index.htmlmet /dist/build.js. En kreeg deze fout bij het uitvoeren van Karma.
De opdracht om Karma uit te geven met behulp van package.jsonwas:
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
De uitvoerconfiguratie in webpack.config.jswas:
module.exports = {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
...
}
Mijn oplossing: geïnspireerd door het antwoord van Evan Burbidge heb ik het volgende toegevoegd aan het einde van webpack.config.js:
if (process.env.BABEL_ENV === 'test') {
module.exports.output.filename = '[name].[hash:8].js'
}
En toen werkte het uiteindelijk voor zowel paginaweergave als e2e.
Antwoord 11
Vergelijkbare oplossing als hierboven met file-loader, maar ik denk dat deze oplossing eleganter is. Voorheen specificeerde ik alleen de [name]
, en voegde het [path][name]
toe om mijn conflict als volgt op te lossen:
module: {
rules: [
{
test: /\.(mp4|m4s)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],