webpack/README.md

<div class="md-contents" style="font-size: 18px; line-height: 1.75;">
<h2>1. Cài đặt webpack</h2>
<p><strong>Bước 1:</strong> Cài đặt Node.js và npm</p>
<p>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).</p>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid        #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm install</p>
</blockquote>
<p><strong>Bước 2:</strong> Khởi tạo file <b>package.json</b></p>
<ul>
<li>Khởi tạo bằng lệnh :</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid        #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm init -y</p>
</blockquote>
<p>Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json</p>
<p><strong>Bước 3:</strong> Cài đặt webpack</p>
<p>Sử dụng lệnh sau để cài đặt webpack và webpack-cli:</p>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid        #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm install --save-dev webpack</p>
</blockquote>

<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid        #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm install webpack webpack-cli --save-dev</p>
</blockquote>
<p>Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:</p>
<br>
<img  style="display: block; margin: 10px 0;" src="https://repo.hurasoft.com/tieptk/webpack/raw/branch/master/webpack/dist/assets/images/file_package.png" alt="" width="554" height="294" />
<br>
<p><strong>Bước 4:</strong> Tạo một tệp cấu hình webpack</p>
<p>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 <strong>webpack.config.js</strong> mới trong thư mục gốc dự án và thêm các cài đặt sau:</p>
<strong>Ví dụ:</strong>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;"><code class="language-javascript">
    const path = require('path');       
        module.exports = {
            entry: './src/index.js',
            output: {
                path: path.resolve(__dirname, 'dist'),
                filename: 'bundle.js'
            }
    };
</code>
</pre>

<b>Ghi chú:</b>
    <p>Cần cài thêm path bằng lệnh sau:</p>
    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
            #5488c7; margin: 0 0 1rem;">
        <p style="margin: 0;
            color: #818181;
            font-style: italic;">npm install --save-dev path</p>
    </blockquote>

<p><strong>Entry</strong>: 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</p>
<p><strong>Output</strong> : 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</p>
<p><strong>Bước 6:</strong> Chạy webpack</p>
<p>Để chạy webpack, sử dụng lệnh sau:</p>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid        #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npx webpack</p>
</blockquote>
<p>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.</p>
<h2>2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js</h2>
<h3>2.1 Cấu hình đường dẫn đến tệp JavaScript chính với <strong>Entry</strong></h3>
<ul>
<li>Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn <strong>Entry</strong>.</li>
</ul>
<strong>Ví dụ:</strong>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">    <code>
        module.exports = {
            entry: './src/index.js',
            // ...
        };
    </code>
    </pre>
<ul>
<li>Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là <strong>./src/index.js</strong>.</li>
</ul>
<h3>2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với <strong>Output</strong></h3>
<ul>
<li>Để 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 <strong>Ouput</strong>.</li>
</ul>
<strong>Ví dụ:</strong>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">
    <code>
        const path = require('path');
        
        module.exports = {
            entry: './src/index.js',
            output: {
                filename: 'bundle.js',
                path: path.resolve(__dirname, 'dist')
            },
            
        };
</code>
</pre>
<ul>
<li>Trong ví dụ này, đang chỉ định rằng tệp đầu ra là <strong>./dist/bundle.js.</strong></li>
</ul>
<h3>2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với <strong>module</strong></h3>
<ul>
<li>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 <strong>module.rules</strong>.</li>
</ul>
<strong>Ví dụ:</strong>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">    <code>
        module.exports = {
            entry: './src/index.js',
                output: {
                    filename: 'bundle.js',
                    path: path.resolve(__dirname, 'dist')
                },
            module: {
                rules: [
                    { test: /.tsx?$/, use: 'ts-loader' },
                ]
            },
            // ...
        };
    </code>
    </pre>
<ul>
<li>Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.</li>
</ul>
<strong>Có thể tham khảo thêm các ứng dụng khác như xử lý css,image <a href="https://webpack.js.org/configuration/module/#rule" target="_blank">Tại đây</a></strong>
<h3>2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack</h3>
<ul>
<li><strong>Webpack</strong> được phát triển khá nhiều plugin <strong>ví dụ: HtmlWebpackPlugin,CleanWebpackPlugin.</strong> Đây là một số plugin cơ bản hay được sử dụng nhất.</li>
</ul>
<p><strong>2.1.4.1 </strong><strong>HtmlWebpackPlugin</strong> có tác dụng tạo ra một tệp html có tiêu đề là <strong>webpack demo</strong> và đặt tên là <strong>index.html</strong> như ví dụ ở bên dưới:</p>
<ul>
<li>Để sử dụng được <strong>HtmlWebpackPlugin</strong>, chạy câu lệnh sau:</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid                #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm install --save-dev html-webpack-plugin</p>
</blockquote>
<ul>
<li>Sau đó thì thêm các đoạn mã code bên dưới vào file <strong>webpack.config.js</strong></li>
</ul>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">    <code>
        const HtmlWebpackPlugin = require('html-webpack-plugin');

        module.exports = {
            plugins: [
                new HtmlWebpackPlugin({
                title: 'webpack demo',
                    filename: 'index.html',
                    template: 'src/template.html'
                })
            ],
            // ...
        };
</code>
</pre>
<p><strong>2.1.4.2</strong> <strong>CleanWebpackPlugin</strong> có tác dụng xóa bỏ các tệp js,html,css.. đã được bundler trước đấy:</p>
<ul>
<li>Để sử dụng được <strong>CleanWebpackPlugin</strong>, chạy câu lệnh sau:</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid                    #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm install --save-dev clean-webpack-plugin</p>
</blockquote>
<ul>
<li>Sau đó thì thêm các đoạn mã code bên dưới vào file <strong>webpack.config.js</strong></li>
</ul>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">    <code>
        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
        
        module.exports = {
            // ...
            plugins: [
                new CleanWebpackPlugin()
            ]
        };
</code>
    </pre>
<h3>2.1.5 Sử dụng optimization cho cấu hình của webpack</h3>
<ul>
<li>Tùy chọn <strong>Optimization</strong> 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.</li>
</ul>
<p>Thêm các dòng bên dưới vào file <strong>webpack.config.js</strong> để tối ưu hóa đóng gói file bundler:</p>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">        <code>
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    test: /.js(?.*)?$/i,
                }),
            ],
        },
        </code>
        </pre>
<strong>Ghi chú:</strong>
<ul>
<li><strong>minimize: true</strong> chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin <strong>TerserPlugin</strong> để nén các tệp JavaScript</li>
</ul>
<p><strong>Tuy nhiên</strong> optimization còn có tùy chọn <strong>SplitChunks</strong>:</p>
<ul>
<li>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</li>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <strong>webpack.config.js</strong></p>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">            <code>
            optimization: {
                splitChunks: {
                chunks: 'all',
                },
            },
        </code>
    </pre>
<h3>2.1.6 Tùy chọn resolve</h3>
<ul>
<li><strong>Resolve</strong> khi thêm vào file <strong>webpack.config.js</strong> 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.</li>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <strong>webpack.config.js</strong></p>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">                <code>
                resolve: {
                    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
                },
            </code>
        </pre>
<ul>
<li>Có thể sử dụng <strong>Extensions</strong> 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.</li>
</ul>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">                    <code>
                    resolve: {
                        extensions: ['.js', '.jsx', '.json'],
                    },
                </code>
         </pre>
<strong>Ghi chú:</strong>
<ul>
<li>['.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.</li>
</ul>
<a href="https://webpack.js.org/configuration/resolve/">Tham khảo thêm ở đây</a>
<h3>2.1.7 Chế độ (mode) trong Webpack</h3>
<ul>
<li>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</li>
<li>Có 2 tùy chọn chính:</li>
<ul>
<li>development</li>
<li>production</li>
</ul>
</ul>
<p>Sử dụng đoạn mã code bên dưới vào file <strong>webpack.config.js</strong></p>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">        <code>
        module.exports = {
            mode: 'development'
        }
        </code>
    </pre>
<strong>Ghi chú:</strong>
<ul>
<li>Chế độ development thực hiện một số ưu tiên riêng:</li>
<ul>
<li>Build nhanh</li>
<li>Ít tối ưu hoá code, nén code hơn.</li>
<li>Không xoá bỏ các comment trong code.</li>
<li>Cung cấp thêm thông tin lỗi và gợi ý</li>
<li>Cung cấp thêm khả năng debug tốt hơn.</li>
</ul>
<li>Chế độ production chậm hơn, tuy nhiên lại tối ưu tốt hơn kết quả đầu ra</li>
</ul>
<h3>2.1.7 Watch mode trong webpack.config.js</h3>
<ul>
<li>Thêm đoạn mã bên dưới:</li>
</ul>
<pre style="background-color: #f6f8fa; border: 1px solid #e5e5e5; line-height: 28px; border-radius: 3px;">        <code>
        module.exports = {
            watch: true // Thêm mới dòng này
        }
        </code>
    </pre>
<ul>
<li>Sau đó chạy lệnh:</li>
</ul>
<blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid            #5488c7; margin: 0 0 1rem;">
<p style="margin: 0; color: #818181; font-style: italic;">npm run dev</p>
</blockquote>
<ul>
<li>Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh <strong>npm run dev</strong> 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.</li>
</ul>
</div>