Bài hôm nay chúng ta tìm hiểu về quản lí output với nhiều file đầu vào entry, tên của các file output sẽ dựa vào tên của các entry.
1. Chuẩn bị file
Các file code ban đầu
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
console.log('Hello World!')
2. Cấu hình multiple entry point
Trước khi tìm hiểu vấn đề chúng ta ngó lại một chút file webpack.config.js
chỗ đoạn entry point
module.exports = {
entry: './src/index.js',
...
}
Ta thấy entry đang là Single Entry, thực ra đây chỉ là kiểu viết shorthand của
module.exports = {
entry: {
main: './src/index.js'
}
...
}
Bây giờ các bạn tạo thêm file src/my-test.js
và code bên trong đơn giản thế này
console.log('kentrung test')
Nếu muốn entry point nhận file js ở trên ta viết thêm cặp key-value với key là tên nào cũng được, value là đường dẫn tới file src/my-test.js
entry: {
main: './src/index.js',
myTest: './src/my-test.js'
}
3. Cấu hình output
Sau khi sửa lại entry, giờ ta sửa tiếp output
module.exports = {
...
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
- Nội dung trên cho biết, với 2 file đầu vào entry là main và myTest sẽ được output ra 2 file với tên tương ứng là main.js và myTest.js
- Chạy lại webpack với
npm run dev
để áp dụng cấu hình mới. Bạn vào folder dist nếu thấy đúng là có thêm hai filemain.js
vàmyTest.js
thì chúng ta đã test thành công output với nhiều đầu vào entry.
4. Tổng kết file webpack.config.js
const path = require('path')
module.exports = {
entry: {
main: './src/index.js',
myTest: './src/my-test.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
Các đồng chí lưu ý là chúng ta mới chỉ output ra hai file
dist/main.js
vàdist/myTest.js
còn các bạn muốn áp dụng vào thì filedist/index.html
phải gọi nó vào nhé.
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.
- Tham khảo thêm tại: https://webpack.js.org/concepts/output/#multiple-entry-points
- Source code github: https://github.com/kentrung/webpack-tutorial
- Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Chuẩn bị file2. Cấu hình multiple entry point3....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Chuẩn bị file2. Cấu hình multiple entry point3. Cấu hình output4. Tổng kết file webpack.config.js1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Chuẩn bị file2. Cấu hình multiple entry point3. Cấu hình output4. Tổng kết file webpack.config.jsV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Chuẩn bị file2. Cấu hình multiple entry point3. Cấu hình output4. Tổng kết file webpack.config.jsV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Chuẩn bị file2. Cấu hình multiple entry point3. Cấu hình output4. Tổng kết file webpack.config.jsIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm...