处理HTML资源

1. 下载包

npm i html-webpack-plugin -D

2. 配置

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: '',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '/static/js/index.js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    },{
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },{
      test: /\.styl$/,
      use: ['style-loader', 'css-loader', 'stylus-loader']
    },{
      test: /\.(png|svg|webp|gif|jpe?g)$/,
      type: 'asset',
      parse: {
        dataUrlCondition: {
          maxSize: 10 * 1024
        }
      },
      generator: {
        filename: '/static/image/[hash:10][ext][query]'
      }
    },{
      test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
      type: 'asset/resource',
      generator: {
        filename: '/static/media/[hash:10][ext][query]'
      }
    },{
        test: /\.js$/,
        excludes: 'node_module',
        loader: 'babel-loader'
    }]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, 'src')
    }),
    new HTMLWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html特点：1、结构和原来一致；2、自动引入打包输出的资源
      template: path.resolve(__dirname, 'public/index.html')
    })
  ],
  mode: 'development'
}