# webpack4系列教材-入门2

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

<%= htmlWebpackPlugin.options.title%>这个为htmlWebpackPlugin的约定语法（设置标题的定位符），更多定位符可以参考文档

执行

yarn run start

看来下图所示的，即代表成功

-w288

在根目录中生成dist的文件夹，并按照模板生成html文件和生成打包的js，恭喜你成功了！

本节疑问

要是多次进行yarn run start，那在dist目录应该会生成多个bundle.xxx.js的文件，要是文件多起的话，你都不知道哪个是新哪个是旧，该如何是好呢？