update file readme.md

README.md

@@ -1,43 +1,30 @@
-<div class="md-contents" style="font-size:18px;line-height:1.75;">
+1. Cài đặt webpack
+Bước 1: Cài đặt Node.js và npm
 
-    <h2>1. Cài đặt webpack</h2>
-    <p><b>Bước 1:</b> 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>
-    <p><b>Bước 2:</b> Khởi tạo npm</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</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><b>Bước 3:</b> 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 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>
-    <b>Ví dụ:</b>
-    <img style="display: block;
-        margin: 10px 0;" class="progressive-img_full article-img" width="554" height="294"
-        src="https://repo.hurasoft.com/tieptk/webpack/raw/branch/master/webpack/dist/assets/images/file_package.png">
+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><b>Bước 4:</b> 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 <b>webpack.config.js</b> mới
-        trong thư
-        mục gốc dự án và thêm các cài đặt sau:</p>
-    <b>Ví dụ:</b>
+Bước 2: Khởi tạo npm
+
+Khởi tạo bằng lệnh :
+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ụ:
 
-    <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',
@@ -46,53 +33,35 @@
                 filename: 'bundle.js'
             }
     };
-</code>
-</pre>
 
+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
 
-    <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><b>Bước 6:</b> 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>
+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
 
-    <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 <b>Entry</b></h3>
-    <ul>
-        <li>Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn <b>Entry</b>.</li>
-    </ul>
-    <b>Ví dụ:</b>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-    <code>
+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',
             // ...
         };
-    </code>
-    </pre>
-    <ul>
-        <li>Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là <b>./src/index.js</b>.</li>
-    </ul>
-
-    <h3>2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với <b>Output</b></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 <b>Ouput</b>.</li>
-    </ul>
-    <b>Ví dụ:</b>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-    <code>
+    
+    
+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 = {
@@ -103,22 +72,13 @@
             },
             // ...
         };
-    </code>
-    </pre>
-    <ul>
-        <li>Trong ví dụ này, đang chỉ định rằng tệp đầu ra là <b>./dist/bundle.js.</b></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 <b>module</b></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 <b>module.rules</b>.</li>
-    </ul>
-    <b>Ví dụ:</b>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-    <code>
+    
+    
+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: {
@@ -132,41 +92,19 @@
             },
             // ...
         };
-    </code>
-    </pre>
-    <ul>
-        <li>Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.</li>
-    </ul>
-    <b>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></b>
+    
+    
+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:
 
-    <h3>2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack</h3>
-    <ul>
-        <li><b>Webpack</b> được phát triển khá nhiều plugin <b>ví dụ:
-                HtmlWebpackPlugin,CleanWebpackPlugin.</b> Đây là một số plugin cơ bản hay được
-            sử dụng
-            nhất.</li>
-    </ul>
-    <p><b>2.1.4.1 </b><b>HtmlWebpackPlugin</b> có tác dụng tạo ra một tệp html có tiêu đề là
-        <b>webpack demo</b> và đặt
-        tên
-        là
-        <b>index.html</b> như ví dụ ở bên dưới:
-    </p>
-    <ul>
-        <li>Để sử dụng được <b>HtmlWebpackPlugin</b>, 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 <b>webpack.config.js</b></li>
-    </ul>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-    <code>
+Để 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 = {
@@ -179,26 +117,15 @@
             ],
             // ...
         };
-    </code>
-    </pre>
+    
+    
+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:
 
-    <p><b>2.1.4.2</b> <b>CleanWebpackPlugin</b> 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 <b>CleanWebpackPlugin</b>, 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 <b>webpack.config.js</b></li>
-    </ul>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-    <code>
+Để 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 = {
@@ -207,21 +134,13 @@
                 new CleanWebpackPlugin()
             ]
         };
-    </code>
-    </pre>
+    
+    
+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:
 
-    <h3>2.1.5 Sử dụng optimization cho cấu hình của webpack</h3>
-
-    <ul>
-        <li>Tùy chọn <b>Optimization</b> 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 <b>webpack.config.js</b> để 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: [
@@ -230,127 +149,73 @@
                 }),
             ],
         },
-        </code>
-        </pre>
-    <b>Ghi chú:</b>
-    <ul>
-        <li><b>minimize: true</b> chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin <b>TerserPlugin</b>
-            để nén
-            các tệp JavaScript</li>
-    </ul>
+        
+        
+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:
 
-    <p><b>Tuy nhiên</b> optimization còn có tùy chọn <b>SplitChunks</b>:</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>
+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
 
-    <p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
-
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-            <code>
+            
             optimization: {
                 splitChunks: {
                 chunks: 'all',
                 },
             },
-        </code>
-    </pre>
+        
+    
+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
 
-    <h3>2.1.6 Tùy chọn resolve</h3>
-    <ul>
-        <li><b>Resolve</b> khi thêm vào file <b>webpack.config.js</b> 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 <b>webpack.config.js</b></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 <b>Extensions</b> 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>
+            
+        
+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'],
                     },
-                </code>
-         </pre>
-    <b>Ghi chú:</b>
-    <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>
+                
+         
+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
 
-
-    <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 <b>webpack.config.js</b></p>
-    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
-        <code>
+        
         module.exports = {
             mode: 'development'
         }
-        </code>
-    </pre>
-    <b>Ghi chú:</b>
-    <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>
+        
+    
+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
         }
-        </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 <b>npm run dev</b> 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>
+        
+    
+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.