Webpack từ A đến Á: Webpack multiple file types per entry (ok)

https://kentrung256.blogspot.com/2020/06/webpack-multiple-file-types-per-entry.html

Webpack từ A đến Á: Webpack multiple file types per entry

August 01, 2020 webpackỞ 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 là một file. Bài hôm nay chúng ta sẽ học cách nhập nhiều file cho mỗi key entry. Hãy làm một ví dụ, chúng ta đang code trang chủ và trang này load hai file home.js và slider.js. Như vậy ta cần tạo một key entry nhận hai file JS này và gộp chúng lại làm một file JS duy nhất.

Nội dung chính

• 1. Chuẩn bị file

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

1. Chuẩn bị file

Tạo file src/home.js như sau:

console.log('home.js')

Tạo file src/slider.js

console.log('slider.js')

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

Code file webpack.config.js như sau

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 ban đầu thì hiện chỉ nhận một file đầu vào, giờ để key entry này nhận nhiều file thì ta cần chuyển nó sang mảng các string là xong

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 là main.js là gộp của hai file home và slider. Trang src/index.html ta chỉ cần gọi file main.js là xong. Mở file html này lên mà thấy hai log như này là ok

home.js
slider.js

Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.