diff --git a/README.md b/README.md index e69de29..62363a0 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,356 @@ +
+ +

1. Cài đặt webpack

+

Bước 1: Cài đặt Node.js và npm

+

Webpack cần Node.js và npm để hoạt động. Nếu chưa cài đặt Node.js và npm, có thể tải xuống từ trang chủ + của + Node.js (https://nodejs.org).

+

Bước 2: Khởi tạo npm

+ +
+

npm init

+
+

Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json

+

Bước 3: Cài đặt webpack

+

Sử dụng lệnh sau để cài đặt webpack và webpack-cli:

+
+

npm install webpack webpack-cli --save-dev

+
+

Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:

+ Ví dụ: + + +

Bước 4: Tạo một tệp cấu hình webpack

+

Webpack sử dụng một tệp cấu hình để cấu hình cách webpack hoạt động. Tạo một tệp webpack.config.js mới + trong thư + mục gốc dự án và thêm các cài đặt sau:

+ Ví dụ: + + 
+
+    const path = require('path');       
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                path: path.resolve(__dirname, 'dist'),
+                filename: 'bundle.js'
+            }
+    };
+
+
+ + +

Entry: Là file webpack sẽ bắt đầu làm việc và thực hiện viêc nạp file để thực hiện việc + bundler, + cần phải trỏ tên và đúng đường dẫn đến file code cần bundler

+

Output : Nó sẽ có tác dụng chỉ cho webpack biết cần phải lưu file tên gì và được compile ra + đâu +

+

Bước 6: Chạy webpack

+

Để chạy webpack, sử dụng lệnh sau:

+
+

npx webpack

+
+

Lệnh này sẽ đóng gói mã nguồn JavaScript của bạn và lưu trữ nó trong thư mục đầu ra được chỉ định trong tệp + cấu + hình webpack.

+ +

2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js

+

2.1 Cấu hình đường dẫn đến tệp JavaScript chính với Entry

+ + Ví dụ: + 
+    
+        module.exports = {
+            entry: './src/index.js',
+            // ...
+        };
+    
+
+ + +

2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với Output

+ + Ví dụ: + 
+    
+        const path = require('path');
+        
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                filename: 'bundle.js',
+                path: path.resolve(__dirname, 'dist')
+            },
+            // ...
+        };
+    
+
+ + +

2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với module

+ + Ví dụ: + 
+    
+        module.exports = {
+            entry: './src/index.js',
+                output: {
+                    filename: 'bundle.js',
+                    path: path.resolve(__dirname, 'dist')
+                },
+            module: {
+                rules: [
+                    { test: /\.tsx?$/, use: 'ts-loader' },
+                ]
+            },
+            // ...
+        };
+    
+
+ + Có thể tham khảo thêm các ứng dụng khác như xử lý css,image Tại đây + +

2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack

+ +

2.1.4.1 HtmlWebpackPlugin có tác dụng tạo ra một tệp html có tiêu đề là + webpack demo và đặt + tên + là + index.html như ví dụ ở bên dưới: +

+ +
+

npm install --save-dev html-webpack-plugin

+
+ + 
+    
+        const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+        module.exports = {
+            plugins: [
+                new HtmlWebpackPlugin({
+                title: 'webpack demo',
+                    filename: 'index.html',
+                    template: 'src/template.html'
+                })
+            ],
+            // ...
+        };
+    
+
+ +

2.1.4.2 CleanWebpackPlugin có tác dụng xóa bỏ các tệp js,html,css.. đã + được bundler trước đấy: +

+ +
+

npm install --save-dev clean-webpack-plugin

+
+ + 
+    
+        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+        
+        module.exports = {
+            // ...
+            plugins: [
+                new CleanWebpackPlugin()
+            ]
+        };
+    
+
+ +

2.1.5 Sử dụng optimization cho cấu hình của webpack

+ + + +

Thêm các dòng bên dưới vào file webpack.config.js để tối ưu hóa đóng gói file bundler:

+ 
+        
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    test: /\.js(\?.*)?$/i,
+                }),
+            ],
+        },
+        
+
+ Ghi chú: + + +

Tuy nhiên optimization còn có tùy chọn SplitChunks:

+ + +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ + 
+            
+            optimization: {
+                splitChunks: {
+                chunks: 'all',
+                },
+            },
+        
+
+ +

2.1.6 Tùy chọn resolve

+ +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ 
+                
+                resolve: {
+                    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+                },
+            
+
+ + 
+                    
+                    resolve: {
+                        extensions: ['.js', '.jsx', '.json'],
+                    },
+                
+
+ Ghi chú: + + Tham khảo thêm ở đây + + +

2.1.7 Chế độ (mode) trong Webpack

+ + +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ 
+        
+        module.exports = {
+            mode: 'development'
+        }
+        
+
+ Ghi chú: + +

2.1.7 Watch mode trong webpack.config.js

+ + 
+        
+        module.exports = {
+            watch: true // Thêm mới dòng này
+        }
+        
+
+ +
+

npm run dev

+
+ +
\ No newline at end of file