Webpack 5: Webpack multiple file types per entry

Webpack từ A đến Á cùng kentrung

Ở bài trước chúng ta đã học được cách tạo được nhiều output từ nhiều key entry, mỗi key entry là một file. Bài hôm nay sẽ là mỗi key entry nhưng nhiều file. Ví dụ chúng ta có 2 file home.js và slider.js, ta muốn gộp hai file này làm một file output duy nhất.

1. Chuẩn bị file

Các file code như sau:

console.log('home.js')

console.log('slider.js')

2. Cấu hình Multiple file types per entry

Code file webpack.config.js ban đầu

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Ta thấy với key entry trên chỉ nhận một file đầu vào là src/index.js, giờ để key entry này nhận nhiều file thì ta cần chuyển nó sang mảng, output ra sẽ là main.js

module.exports = {
  entry: {
    main: [
      './src/home.js',
      './src/slider.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

Chạy lại webpack với npm run dev để áp dụng cấu hình mới. File output xuất ra dist/main.js là gộp của hai file src/home.js và src/slider.js. Trang dist/index.html ta chỉ cần gọi file main.js là xong. Mở file html này lên mà thấy 2 log như này là ok

home.js
slider.js

3. Tổng kết file webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    main: [
      './src/home.js',
      './src/slider.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}