Conflict: meerdere middelen verzenden naar dezelfde bestandsnaam

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.htmlvan de directory /publicgewijzigd in /srcom 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.htmlen 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"]
        }),
    ]
};

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

module: {
rules: [
  {
    test: /\.(mp4|m4s)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
],