子由风:webpack打包原理入门探究(一)zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(二)基本配置zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(三)入口探究zhuanlan.zhihu.com
使用 html-webpack-plugin 打包自动生成 index.html
首先,我们需要安装 html-webpack-plugin
npm install html-webpack-plugin --save-dev
![472cfc22e5e737066ff2c4699d4cd817.png](https://i-blog.csdnimg.cn/blog_migrate/8d13700d63413e25ffc7b3708bc1ba11.png)
配置 webpack.html.plugin.config.js
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: {
main: resolve('src/scripts/main.js'),
a: resolve('src/scripts/a.js')
}, // 指定入口文件
output: {
path: resolve('dist/js'),
// filename: '[name]-[hash].js'
filename: "[name]-[chunkhash].js"
},
plugins: [
new htmlWebpackPlugin()
]
}
配置 package.json
![22e736b6d21c846ba4a24cbe59b51a04.png](https://i-blog.csdnimg.cn/blog_migrate/c8615c98ef7fd671272c68ef178d8757.png)
运行 npm run webpack.html.plugin
![13b577470268986281ab9d25a498099e.png](https://i-blog.csdnimg.cn/blog_migrate/27ba0426e7876c94e6e7c76bc343d9de.jpeg)
效果如下,在 dist 目录生成 index.html,同事也引入了 a.js, main.js
![0e9fff1c01f641e4065ddfc92906d3b6.png](https://i-blog.csdnimg.cn/blog_migrate/6cb809375fc56b117dd87ccb6356c8fe.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>
那如果我们打包的是根目录的 index.html,会发生什么情况呢?
我们修改一下 webpack.html.plugin.config.js
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: {
main: resolve('src/scripts/main.js'),
a: resolve('src/scripts/a.js')
}, // 指定入口文件
output: {
path: resolve('dist/js'),
// filename: '[name]-[hash].js'
filename: "[name]-[chunkhash].js"
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html', // 指定根目录下的 index.html
})
]
}
再运行 npm run webpack.html.plugin
dist 下的 index.html 发生了改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="main.bundle.js"></script>
<script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>
根目录下的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="main.bundle.js"></script>
</body>
</html>
但是我们会发现,所有的东西都生成在 js 文件中了,继续修改一下配置
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: {
main: resolve('src/scripts/main.js'),
a: resolve('src/scripts/a.js')
}, // 指定入口文件
output: {
path: resolve('dist'),
// filename: '[name]-[hash].js'
filename: "js/[name]-[chunkhash].js"
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html', // 指定根目录下的 index.html
})
]
}
再运行一下指令
![a901044fc2f414b7aa47c8ba9b0bb139.png](https://i-blog.csdnimg.cn/blog_migrate/bf7018fab7b1a0902ddc49f955a3f8ce.png)
![d750b818f092249587529d49a6835ecb.png](https://i-blog.csdnimg.cn/blog_migrate/699e20feee24b3bf9c50020487be9073.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack a </title>
</head>
<body>
<script type="text/javascript" src="js/main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="js/a-a1ad07a706a1b2702814.js"></script></body>
</html>
嗯,这一节课就讲到这里吧