> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/plugin-htmlwebpackplugin-ok.md).

# \[WEBPACK] Plugin HtmlWebpackPlugin (ok)

https\://hocwebchuan.com/tutorial/webpack/html\_webpack\_plugin.php

### Cài đặt và setting HtmlWebpackPlugin

* Plugin `HtmlWebpackPlugin` được dùng để sắp xếp các file html theo một trật tự nhất định, giúp tối ưu nội dung file html hơn.
* Trước tiên, ta tiến hành cài đặt `HtmlWebpackPlugin` và cấu hình file `webpack.config.js` như bên dưới:

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

**Kết quả**

![HTML webpack plugin](https://hocwebchuan.com/tutorial/webpack/images/img_html_webpack_plugin01.png)

**Chỉnh nội dung file webpack.config.js:**

```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
  /*[name]: [path]*/
    app: './src/index.js',
    print: './src/my-test.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};
```

* Tiến hành chạy lệnh npm để thực thi nội dung trên:

```
npm run build
```

* Khi này mở file `/dist/index.html`, chúng ta sẽ thấy nội dung file đã được sắp xếp lại như sau:

| Trước | Sau khi sắp xếp |
| ----- | --------------- |
|       |                 |

* Ta thấy nội dung sau khi được sắp xếp đã được điều chỉnh lại đúng chuẩn HTML hơn, và các đoạn script đã được đưa xuống bên dưới, đảm bảo cho việc chạy scrip sau khi HTML đã được load hoàn toàn.

#### Các lệnh chính đã sử dụng trong toàn bộ bài học

| Bài học                              | Lệnh đã dùng |
| ------------------------------------ | ------------ |
| Cài đặt Webpack                      |              |
| Webpack bundle                       |              |
| Cấu hình Webpack                     |              |
| Webpack quản lý output               |              |
| Cài đặt và setting HtmlWebpackPlugin |              |