• webpack处理html资源

    1.在这里其实就是相当于下载一个插件

    2.先下载包

    npm i html-webpack-plugin -D

    3.在配置当中要引入下载的插件包，然后再在module.exports={ }当中进行配置

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    1.     new HtmlWebpackPlugin({
    2.       // 以 public/index.html 为模板创建文件
    3.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
    4.       template: path.resolve(__dirname, "public/index.html"),
    5.     })
    • webpack.config.js 
      1. const path = require("path");
      2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
      3. const HtmlWebpackPlugin = require("html-webpack-plugin");
      4.  
      5. module.exports = {
      6.   entry: "./src/main.js",
      7.   output: {
      8.     path: path.resolve(__dirname, "dist"),
      9.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
      10.     clean: true, // 自动将上次打包目录资源清空
      11.   },
      12.   module: {
      13.     rules: [
      14.       {
      15.         // 用来匹配 .css 结尾的文件
      16.         test: /\.css$/,
      17.         // use 数组里面 Loader 执行顺序是从右到左
      18.         use: ["style-loader", "css-loader"],
      19.       },
      20.       {
      21.         test: /\.less$/,
      22.         use: ["style-loader", "css-loader", "less-loader"],
      23.       },
      24.       {
      25.         test: /\.s[ac]ss$/,
      26.         use: ["style-loader", "css-loader", "sass-loader"],
      27.       },
      28.       {
      29.         test: /\.styl$/,
      30.         use: ["style-loader", "css-loader", "stylus-loader"],
      31.       },
      32.       {
      33.         test: /\.(png|jpe?g|gif|webp)$/,
      34.         type: "asset",
      35.         parser: {
      36.           dataUrlCondition: {
      37.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
      38.           },
      39.         },
      40.         generator: {
      41.           // 将图片文件输出到 static/imgs 目录中
      42.           // 将图片文件命名 [hash:8][ext][query]
      43.           // [hash:8]: hash值取8位
      44.           // [ext]: 使用之前的文件扩展名
      45.           // [query]: 添加之前的query参数
      46.           filename: "static/imgs/[hash:8][ext][query]",
      47.         },
      48.       },
      49.       {
      50.         test: /\.(ttf|woff2?)$/,
      51.         type: "asset/resource",
      52.         generator: {
      53.           filename: "static/media/[hash:8][ext][query]",
      54.         },
      55.       },
      56.       {
      57.         test: /\.js$/,
      58.         exclude: /node_modules/, // 排除node_modules代码不编译
      59.         loader: "babel-loader",
      60.       },
      61.     ],
      62.   },
      63.   plugins: [
      64.     new ESLintWebpackPlugin({
      65.       // 指定检查文件的根目录
      66.       context: path.resolve(__dirname, "src"),
      67.     }),
      68.     new HtmlWebpackPlugin({
      69.       // 以 public/index.html 为模板创建文件
      70.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      71.       template: path.resolve(__dirname, "public/index.html"),
      72.     }),
      73.   ],
      74.   mode: "development",
      75. };

    4.修改index.html

    去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>webpack5</title>
    8.   </head>
    9.   <body>
    10.     <h1>Hello Webpack5</h1>
    11.     <div class="box1"></div>
    12.     <div class="box2"></div>
    13.     <div class="box3"></div>
    14.     <div class="box4"></div>
    15.     <div class="box5"></div>
    16.     <i class="iconfont icon-arrow-down"></i>
    17.     <i class="iconfont icon-ashbin"></i>
    18.     <i class="iconfont icon-browse"></i>
    19.   </body>
    20. </html>

     5.运行打包

    npx webpack

    此时 dist 目录就会输出一个 index.html 文件

  • 相关阅读:
    社区团购新玩法，生鲜蔬菜配货发货小程序商城
    Postman自动化测试实战：使用脚本提升测试效率
    优化风控模型特征变量池，试一下这种实操方法
    工业品商城软件java和PHP哪个好？
    【低码】asp.net core 实体类可生产 CRUD 后台管理界面
    压缩包已知密码却跳过密码界面直接弹出解压
    MySQL数据库增删改查操作和常用命令
    RCE——远程命令执行（无字母数字篇）
    如何做代码评审（code review）
    9-AJAX-下-axios
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/127644030