Xung đột: Nhiều nội dung phát ra cùng một tên tệp

Tôi là một tân binh webpack muốn tìm hiểu tất cả về nó. Tôi đã gặp xung đột khi chạy webpack của mình nói với tôi:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

Tôi phải làm gì để tránh xung đột?

Đây là webpack.config.js của tôi:

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]",
      }
    ]
  }
};

Tôi không rành về cách tiếp cận của bạn nên tôi sẽ chỉ cho bạn một cách phổ biến để giúp bạn.

Trước hết, về bạn output, bạn đang xác định filenameđể app.jscó ý nghĩa đối với tôi mà đầu ra vẫn sẽ app.js. Nếu bạn muốn làm cho nó năng động, thì chỉ cần sử dụng "filename": "[name].js".

Phần [name]này sẽ làm cho tên tệp động cho bạn. Đó là mục đích của bạn entrynhư một đối tượng. Mỗi khóa sẽ được sử dụng làm tên thay thế cho [name].js.

Và thứ hai, bạn có thể sử dụng html-webpack-plugin. Bạn không cần phải bao gồm nó như là một test.

Tôi đã gặp vấn đề tương tự, tôi thấy nó đang đặt tên tệp đầu ra tĩnh gây ra sự cố của tôi, trong đối tượng đầu ra, hãy thử đối tượng sau.

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

Điều này làm cho nó để các tên tệp khác nhau và nó không xung đột.

CHỈNH SỬA: Một điều tôi đã tìm thấy gần đây là bạn nên sử dụng băm thay vì chunkhash nếu sử dụng tải lại HMR. Tôi chưa tìm hiểu gốc rễ của vấn đề nhưng tôi chỉ biết rằng việc sử dụng chunkhash đã phá vỡ cấu hình webpack của tôi

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

Sẽ hoạt động tốt với HMR sau đó :)

CHỈNH SỬA tháng 7 năm 2018:

Thêm một chút thông tin về điều này.

Hash Đây là một hàm băm được tạo mỗi khi webpack biên dịch, ở chế độ nhà phát triển, điều này rất tốt cho việc xử lý bộ nhớ cache trong quá trình phát triển nhưng không nên được sử dụng cho việc lưu trữ lâu dài các tệp của bạn. Điều này sẽ ghi đè Hash trên mọi bản dựng của dự án của bạn.

Chunkhash Nếu bạn sử dụng nó kết hợp với một đoạn thời gian chạy thì bạn có thể sử dụng nó cho bộ nhớ đệm lâu dài, đoạn thời gian chạy sẽ thấy những gì đã thay đổi trong mã nguồn của bạn và cập nhật các đoạn băm tương ứng. Nó sẽ không cập nhật những người khác cho phép các tệp của bạn được lưu vào bộ nhớ cache.

Tôi đã có cùng vấn đề y hệt. Vấn đề dường như xảy ra với file-loader. Lỗi đã biến mất khi tôi xóa kiểm tra html và html-webpack-pluginthay vào đó đưa vào để tạo index.htmltệp. Đây là webpack.config.jstệp của tôi :

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 tạo tệp index.html và tự động đưa tệp js đi kèm vào đó.

Tôi đã gặp vấn đề tương tự và tôi đã tìm thấy những điều này trong các tài liệu.

Nếu cấu hình của bạn tạo ra nhiều hơn một "đoạn" (như với nhiều điểm nhập hoặc khi sử dụng các plugin như CommonsChunkPlugin), bạn nên sử dụng các thay thế để đảm bảo rằng mỗi tệp có một tên duy nhất.

• [name] được thay thế bằng tên của đoạn.
• [hash] được thay thế bằng hàm băm của biên dịch.
• [chunkhash] được thay thế bằng băm của đoạn.

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

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

Tôi đã gặp lỗi này trong môi trường nhà phát triển cục bộ của mình. Đối với tôi, giải pháp cho lỗi này là buộc các tệp phải xây dựng lại. Để làm điều này, tôi đã thực hiện một thay đổi nhỏ đối với một trong các tệp CSS của mình.

Tôi đã tải lại trình duyệt của mình và lỗi đã biến mất.

Lỗi tương tự trong một dự án Vue.js khi thực hiện e2e với Karma. Trang được phân phát bằng cách sử dụng mẫu tĩnh index.html với /dist/build.js . Và gặp lỗi này khi chạy Karma.

Lệnh phát hành Karma bằng package.json là:

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

Cấu hình đầu ra trong webpack.config.js là:

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

Giải pháp của tôi: lấy cảm hứng từ câu trả lời của Evan Burbidge, tôi đã thêm phần sau vào cuối webpack.config.js :

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

Và sau đó nó hoạt động cho cả phân phát trang và e2e.

Tôi đã thay đổi index.htmltệp từ /publicthư mục thành /srcđể khắc phục sự cố này. (Webpack 5.1.3)