webpack4系列教材-入门2
上集快速回顾
yarn init 初始化一个演示项目
对项目增加webpack的依赖
yarn add webpack
yarn add webpack-cli
新增一个webpack.config.js的文件，在该文件中进行相关配置（简单入门配置可以去上集教材），即可在项目中使用webpack进行打包了
本节要点
使用HtmlWebpackPlugin插件来自动按模板生成（方便各种引入打包文件）
解决痛点
有可能我们会有多个JS文件要进行打包，或者我们需要把hash值加入到文件名中，要是还是直接在index.html硬编码引入的话，这样子webpack打包完的js每次都不一样，就需要很繁琐每次去修改js引入路径，为了解决这个问题，我们这节引入HtmlWebpackPlugin插件来帮我们解决这个问题
开始
引入HtmlWebpackPlugin依赖
yarn add html-webpack-plugin
项目目录
-w192
对比上节，有点少许的变化，新增public文件，这次public/index.html是作为HtmlWebpackPlugin的生成模板
webpack.config.js
const path = require('path')
const HTMLWebpackPlugin = require("html-webpack-plugin")
module.exports = {
mode: 'production', //当前模式为生产模式
entry: './main.js', //入口文件
output: {
filename: 'bundle.[hash].js', //输出文件名新增hash值
path:path.resolve(__dirname,'dist') //__dirname在node.js中为全局变量,表示当前根目录
},
plugins:[
//HTMLWebpackPlugin简单配置
new HTMLWebpackPlugin({
title:'这个是自动生成的喔',
template: path.resolve(__dirname,'public','index.html')
})
]
}
相关的HTMLWebpackPlugin的配置可以参考官方文档
public/index.html
<html>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title%></title>
<body></body>
</html>
<%= htmlWebpackPlugin.options.title%>这个为htmlWebpackPlugin的约定语法（设置标题的定位符），更多定位符可以参考文档
执行
yarn run start
看来下图所示的，即代表成功
-w288
在根目录中生成dist的文件夹，并按照模板生成html文件和生成打包的js，恭喜你成功了！
本节疑问
要是多次进行yarn run start，那在dist目录应该会生成多个bundle.xxx.js的文件，要是文件多起的话，你都不知道哪个是新哪个是旧，该如何是好呢？
