> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/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/javascript/advanced/option-chunks-html-webpack-plugin-ok.md).

# Option chunks Html Webpack Plugin (ok)

https\://kentrung256.blogspot.com/2021/06/html-webpack-plugin.html

&#x20;Ở phần trên lúc tạo ra hai trang dist/index.html và dist/about.html thì cả hai trang này đều load chung một file dist/main.js. Để tách riêng từng trang load từng file JS ta tạo key entry và sử dụng chunks để thêm vào<br>

```

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

module.exports = {
  entry: {
    homepage: ['./src/index.js', './src/slider.js'],
    aboutpage: ['./src/about.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Trang chủ',
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['homepage']
    }),  
    new HtmlWebpackPlugin({
      title: 'Về chúng tôi',
      filename: 'about.html',
      template: './src/about-dev.html',
      chunks: ['aboutpage']
    })
  ]
}
```

Với cấu hình trên thì ta có hai trang HTML load hai file JS riêng biệt.\
Trang dist/index.html load file dist/homepage.js là kết hợp của hai file src/index.js và src/slider.js\
Trang dist/about.html load file dist/aboutpage.js là code file src/about.js