60 lines
2.4 KiB
JavaScript
60 lines
2.4 KiB
JavaScript
const path = require('path');
|
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
|
|
|
|
|
module.exports = {
|
|
// entry được gọi là file nguồn hoặc là các file code chưa biên dịch (typescript,javascript)
|
|
entry: {
|
|
main: './src/index.js',
|
|
homepage: '/src/homepage.ts'
|
|
},
|
|
// extensions được hiểu là các file ban đầu có dạng là javascript, typescript
|
|
resolve: {
|
|
extensions: ['.tsx', '.ts', '.js'],
|
|
},
|
|
// ouput là file đích đến có nghĩa là file sau khi được biên dịch từ file code ban đầu
|
|
// filename để khai báo tên file sau khi biên dịch
|
|
// path là đường dẫn đến file được sinh ra
|
|
output: {
|
|
filename: '[name].js',
|
|
path: path.resolve(__dirname, 'dist/assets/js'),
|
|
},
|
|
// mode là kiểu dạng
|
|
mode: 'development',
|
|
// wathch để có thể tự động biên dịch sau mỗi nhần lưu code
|
|
watch: true,
|
|
// đoạn này sẽ giúp biên dịch code cs6 hoặc các code javascript, typescript mới nhất về phiên bản javascript thuần để có thể chạy trên các trình duyệt cũ
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.tsx?$/,
|
|
use: 'ts-loader',
|
|
exclude: /node_modules/,
|
|
},
|
|
{
|
|
test: /\.(?:js|mjs|cjs)$/,
|
|
exclude: /node_modules/,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [
|
|
['@babel/preset-env', { targets: "defaults" }]
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
// plugins có nhiều plugin hỗ trợ của webback nhưng sẽ dùng 2 loại cơ bản: là clear và html webpack
|
|
// CleanWebpackPlugin giúp cho mỗi lần mà biên dịch code nó sẽ xóa các file code đã được biên dịch cũ tránh bị trùng lặp các file
|
|
plugins: [
|
|
new CleanWebpackPlugin,
|
|
],
|
|
// optimization sẽ tối ưu hóa file code khi chúng ta import thư viện trùng nhau vào nhiều file code js hoặc ts khác nhau, nó sẽ tạo ra 1 file thư viện chung để tránh việc dung lượng tải thư viện quá nhiều
|
|
// optimization: {
|
|
// splitChunks: {
|
|
// chunks: 'all',
|
|
// }
|
|
// }
|
|
|
|
} |