06-打包html资源

/**
 * loader：1. 下载  2. 使用（配置loader）
 * plugins：1. 下载 2. 引入 3. 使用
 */

const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  mode: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: resolve(__dirname, 'src/index.html')
    })
  ],
  mode: 'development'
}

 

！！！注意：webpack5 通过npm i html-webpack-plugin@next -D安装