[WEBPACK] 11. Webpack : Optimize Khi Bundle template (ok)
https://www.youtube.com/watch?v=nGc3fTGRG5k&list=PLJ5qtRQovuEOqsMokakP9ue-y_jXhmCwJ&index=11
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<p>Lorem ipsum dolor, sit amet.</p>
</div>
</body>
</html>
Kết quả:
C:\Users\Administrator\Desktop\demo\dist\index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
</head>
<body>
<div id="root">
<p>Lorem ipsum dolor, sit amet.</p>
</div>
<script src="app.bundle.js"></script>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<p>Lorem ipsum dolor, sit amet.</p>
</div>
</body>
</html>
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')
}
};
