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 install

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:



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