html-webpack-plugin

就是用来生成html页面的，并提供了多种配置

可以自动生成dist文件夹下的html文件，并且自动引用打包后的bundle文件。

如果有多个入口文件，那么该插件也会在生成的html文件中自动引入。

若是重新打包，也无需手动修改html的script的地址，插件会自动帮忙完成更新。

#webpack4的
pnpm i html-webpack-plugin@4 -D

webpack.config.json

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()],
};

生成的dist

dist
	--	index.html
	--	main-sda.js
	--	mian-sda.map

index.html

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
  <!-- 这里的src会自动更新 -->
  <script src="main-a1315.js"></script></body>
</html>

插件常用的参数

webpack.confg.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: {
    index: "./src/index.js",
    main: "./src/main.js",
  },
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      //指定生成的html文件名,
      filename: "home.html",
      //指定模板文件(路径),一般会在src/public文件夹下创建index.html模板文件
      template: "./src/public/index.html",
      /*默认值：“all”  
      多入口的时候，插件会引入所有的打包后的js到html文件中。
      但有的时候，我们只想在html中引用一个bundle,那么这里就可以指定html文件使用哪个chunk的js
      *注意:一定是chunk名，而不是文件名
      */
      chunks: ["main"],
    }),
  ],
};

/*
如果要生成多个html文件，那么可以在plugins中再new一个实例即可。详细可以看npm文档
*/

生成的html文件

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <p>我是模板 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem voluptates harum laborum magni ab alias vero
        voluptatum accusantium, quae quo libero sed commodi, exercitationem doloribus veniam est. Ex, voluptas animi.
    </p>
 <!-- 只引入了一个chunk,且文件名为home.html,使用的还是pubilc/index.html模板 -->
<script src="main-9e84f.js"></script></body>
</html>

插件实现分析

plugin在emit的时候进行操作
利用node的fs模块创建一个html文件
给html文件写入内容，再合适的地方加入一个script标签，src就是利用plugin的apply(compilation)的参数compilation.assets来访问到生成的资源文件。【参考生成资源文件案例】
compilation.assets是一个对象

{
    //键名：路径  键值：文件内容
    "dist/index-sda.js":"xxx文件内容xxx"
}

//所以就算指定output的出口为:
output:{
    filename:"scripts/[name][chunkhash:5].js"
}
//插件生成html的时候也会自动找到scripts路径，因为插件实现是通过访问compilation.assets来生成html的

html-webpack-plugin ​

插件常用的参数 ​

插件实现分析 ​

html-webpack-plugin

插件常用的参数

插件实现分析