webpack/README.md

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).

npm install

Bước 2: Khởi tạo file package.json

• Khởi tạo bằng lệnh :

npm init -y

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 --save-dev webpack

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'
            }
    };

Ghi chú:

Cần cài thêm path bằng lệnh sau:

npm install --save-dev path

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

• Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn Entry.

Ví dụ:

    
        module.exports = {
            entry: './src/index.js',
            // ...
        };
    
    

• Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là ./src/index.js.

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

• Để chỉ định tên và đường dẫn cho tệp đầu ra của webpack, Có thể sử dụng tùy chọn Ouput.

Ví dụ:

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

• Trong ví dụ này, đang chỉ định rằng tệp đầu ra là ./dist/bundle.js.

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

• Webpack sử dụng các loader để xử lý các loại tệp khác nhau, chẳng hạn như các tệp CSS, hình ảnh và cả JavaScript. Để cấu hình các loader,có thể sử dụng tùy chọn module.rules.

Ví dụ:

    
        module.exports = {
            entry: './src/index.js',
                output: {
                    filename: 'bundle.js',
                    path: path.resolve(__dirname, 'dist')
                },
            module: {
                rules: [
                    { test: /.tsx?$/, use: 'ts-loader' },
                ]
            },
            // ...
        };
    
    

• Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.

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

• Webpack được phát triển khá nhiều plugin ví dụ: HtmlWebpackPlugin,CleanWebpackPlugin. Đây là một số plugin cơ bản hay được sử dụng nhất.

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:

• Để sử dụng được HtmlWebpackPlugin, chạy câu lệnh sau:

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

• Sau đó thì thêm các đoạn mã code bên dưới vào file webpack.config.js

    
        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:

• Để sử dụng được CleanWebpackPlugin, chạy câu lệnh sau:

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

• Sau đó thì thêm các đoạn mã code bên dưới vào file webpack.config.js

    
        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

• Tùy chọn Optimization trong cấu hình webpack cho phép cấu hình tối ưu hoá cho quá trình đóng gói mã nguồn. Tùy chọn này bao gồm các tối ưu hoá như tối ưu hoá đóng gói, tối ưu hoá nén và tối ưu hoá tải trang.

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ú:

• minimize: true chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin TerserPlugin để nén các tệp JavaScript

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

• Tùy chọn này cho phép cấu hình tách các module chung thành các tệp riêng biệt để tăng tốc độ tải trang

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

• Resolve khi thêm vào file webpack.config.js cho phép chỉ định các đường dẫn và tệp thêm mới theo từng dự án giúp cho việc import các module và tệp tin trong mã nguồn trở nên dễ dàng và rõ ràng hơn.

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'],
                },
            
        

• Có thể sử dụng Extensions cho tùy chọn resolve để chỉ định danh sách các phần mở rộng tệp tin mặc định cho webpack tìm kiếm.

                    
                    resolve: {
                        extensions: ['.js', '.jsx', '.json'],
                    },
                
         

Ghi chú:

• ['.js', '.jsx', '.json'] là danh sách các phần mở rộng tệp tin mặc định cho webpack tìm kiếm. Nếu import một tệp tin mà không chỉ định phần mở rộng, webpack sẽ tìm kiếm các tệp tin có phần mở rộng này trước khi trả về lỗi.

Tham khảo thêm ở đây

2.1.7 Chế độ (mode) trong Webpack

• Việc thiết lập kịch bản môi trường nhằm tăng thời gian deploy và giảm thời lượng chờ không cần thiết. Chế độ này được Webpack giới thiệu trong phiên bản
• Có 2 tùy chọn chính:
• development
• production

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

        
        module.exports = {
            mode: 'development'
        }
        
    

Ghi chú:

• Chế độ development thực hiện một số ưu tiên riêng:
• Build nhanh
• Ít tối ưu hoá code, nén code hơn.
• Không xoá bỏ các comment trong code.
• Cung cấp thêm thông tin lỗi và gợi ý
• Cung cấp thêm khả năng debug tốt hơn.
• Chế độ production chậm hơn, tuy nhiên lại tối ưu tốt hơn kết quả đầu ra

2.1.7 Watch mode trong webpack.config.js

• Thêm đoạn mã bên dưới:

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

• Sau đó chạy lệnh:

npm run dev

• Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh npm run dev webpack sẽ luôn theo dõi các file, bất cứ thay đổi code nào sau khi ấn save sẽ được tự động build lại.