ความขัดแย้ง: เนื้อหาหลายรายการส่งออกไปยังชื่อไฟล์เดียวกัน

ฉันเป็นมือใหม่ 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]",
      }
    ]
  }
};

ฉันไม่ค่อยคุ้นเคยกับแนวทางของคุณดังนั้นฉันจะแสดงวิธีทั่วไปที่จะช่วยคุณได้

ครั้งแรกของทั้งหมดของคุณ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 ทำลายการกำหนดค่า webpack ของฉัน

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

ควรทำงานได้ดีกับ HMR แล้ว :)

แก้ไขกรกฎาคม 2018:

ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับเรื่องนี้

แฮช นี่คือแฮชที่สร้างขึ้นทุกครั้งที่ webpack คอมไพล์ในโหมด dev ซึ่งดีสำหรับการป้องกันแคชระหว่างการพัฒนา แต่ไม่ควรใช้สำหรับการแคชไฟล์ของคุณในระยะยาว สิ่งนี้จะเขียนทับ Hash ในทุกงานสร้างของโครงการของคุณ

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-plugin จะสร้างไฟล์ index.html และฉีดไฟล์ js ที่รวมเข้ามาโดยอัตโนมัติ

ฉันมีปัญหาเดียวกันและพบสิ่งเหล่านี้ในเอกสาร

หากการกำหนดค่าของคุณสร้าง "กลุ่ม" มากกว่ารายการเดียว (เช่นเดียวกับจุดเข้าใช้งานหลายจุดหรือเมื่อใช้ปลั๊กอินเช่น CommonsChunkPlugin) คุณควรใช้การแทนที่เพื่อให้แน่ใจว่าแต่ละไฟล์มีชื่อที่ไม่ซ้ำกัน

• [name] ถูกแทนที่ด้วยชื่อของกลุ่ม
• [hash] ถูกแทนที่ด้วยแฮชของการคอมไพล์
• [chunkhash] ถูกแทนที่ด้วยแฮชของก้อน

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

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

ฉันพบข้อผิดพลาดนี้ในสภาพแวดล้อม dev ในเครื่องของฉัน สำหรับฉันวิธีแก้ไขข้อผิดพลาดนี้คือบังคับให้สร้างไฟล์ใหม่ ในการดำเนินการนี้ฉันได้ทำการเปลี่ยนแปลงเล็กน้อยกับไฟล์ CSS ของฉัน

ฉันโหลดเบราว์เซอร์ใหม่และข้อผิดพลาดก็หายไป

ข้อผิดพลาดเดียวกันในโปรเจ็กต์ Vue.js เมื่อทำ e2e ด้วย Karma หน้าถูกเสิร์ฟโดยใช้แม่แบบคงที่index.htmlกับ/dist/build.js และได้รับข้อผิดพลาดนี้เรียกใช้ Karma

คำสั่งในการออก 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'
  },
  ...
 }

วิธีแก้ปัญหาของฉัน: ได้รับแรงบันดาลใจจากคำตอบของ Evan Burbidge ฉันต่อท้ายสิ่งต่อไปนี้ที่ท้าย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)