5. 自动引入打包资源 plugins的使用

html-webpack-plugin

1. 作用

• 基于模板html文件生成一个html文件，自动引入webpack打包生成的js文件

2. 安装

npm install html-webpack-plugin -D

3. 引入和配置

// webpack.config.js
// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 使用
new HtmlWebpackPlugin({
  template: path.join(__dirname, './index.html'), // 模板文件目录（相对路径也可以）
  filename: 'webpack.html', // 生成的html文件的名字
  inject: 'body' // webpack打包生成的js文件插入的位置（默认插入head标签）
})

4. 重新打包webpack

npx webpack