> 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/11.-webpack-optimize-khi-bundle.md).
# \[WEBPACK] 11. Webpack : Optimize Khi Bundle template (ok)
C:\Users\Administrator\Desktop\demo\webpack.config.js
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
template: 'src/index.html',
filename: 'index.html'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```
C:\Users\Administrator\Desktop\demo\package.json
```
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\Users\Administrator\Desktop\demo\src\index.html
```
Document
Lorem ipsum dolor, sit amet.
```
Kết quả:
C:\Users\Administrator\Desktop\demo\dist\index.html
```
Document
Lorem ipsum dolor, sit amet.
```
## Sử dụng chunkhash trong output => filename
C:\Users\Administrator\Desktop\demo\webpack.config.js
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
template: 'src/index.html',
filename: 'index.html'
})
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
};
```
C:\Users\Administrator\Desktop\demo\src\index.js
```
console.log('aaaaaaaaaaa');
```
C:\Users\Administrator\Desktop\demo\src\index.html
```
Document
Lorem ipsum dolor, sit amet.
```
C:\Users\Administrator\Desktop\demo\package.json
```
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\Users\Administrator\Desktop\demo\webpack.config.js
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
template: 'src/index.html',
filename: 'index.html'
})
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
};
```