webpack基础_11处理 Html 资源

为什么要处理html资源？
用来优化手动引入打包后的js资源，让其自动引入，而且手动引入的js文件名字在打包时候可能发送变化，打包的时候改个名字，那在html里把名字写死了，到时候就无法找到资源，而且，如果打包生成了10个js文件和10个css资源，一个个引入也很麻烦，而且可能这些资源之间还存在依赖关系，引用顺序错了还会报错。

注意，之前打包的资源都是在main.js里引用了才会打包输出。比如：css里面引用了background-img这个属性指定了图片，然后在main.js里引用了这个css，才会打包css和里面的图片。而这次会打包生成html文件，只需要在webpack.config.jsL里指定要打包那个html模板即可。

1. 下载包

npm i html-webpack-plugin -D

2. 配置

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
	  filename:   "static/html/index2.html",//输出位置及文件名，不写该属性则默认输出到打包文件根目录(dist)
    }),
  ],
  mode: "development",
};

3. 修改 index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入，但是，默认是只引入输出output的js文件

4. 运行指令

npx webpack

此时 dist 目录下的html里就会输出一个 index2.html 文件，里面会自动引入js。

defer:解析是同步的，不会影响dom树，执行在dom树渲染完之后。