Webpack：HTML Webpack Plugin插件

本文介绍: We b pack：HTML We b pack Plugin 插件，介绍We b pack 前端项目中该插件的引入、配置和注意事项。

HTML We b pack Plug in插件，在We b pack 构建的前端项目中，用于简化 index.html 文件的创建，以免除项目打包之后手动创建/拷贝 i nd e x.html到打包目录下的繁琐步骤。以下，从一个已构建好的Vue 项目中的一个现象谈起，逐步深入了解此插件的使用。

从Vue项目中的index.html谈起

Webpack：引入HTML Webpack Plugin插件

Webpack：自动导入脚本与项目打包问题

HTML Webpack Plugin插件的其它配置

&lt;!DOCTYPE html&gt;
&lt;html lang=""&gt;
  &lt;head&gt;
    <meta charset="utf-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <title>cesium-viewer</title>
  <link href="js/about.b241abde.js" rel="prefetch">
  <link href="css/chunk-vendors.b7dbb5dd.css" rel="preload" as="style">
  <link href="css/index.d52c5618.css" rel="preload" as="style">
  <link href="js/chunk-vendors.b8df0be2.js" rel="preload" as="script">
  <link href="js/index.224fd61e.js" rel="preload" as="script">
  <link href="css/chunk-vendors.b7dbb5dd.css" rel="stylesheet">
  <link href="css/index.d52c5618.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but cesium-viewer doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong></noscript>
  <div id="app"></div>
  <script src="js/chunk-vendors.b8df0be2.js"></script>
  <script src="js/index.224fd61e.js"></script>
</body>

</html>

# Webpack 5
  npm i --save-dev html-webpack-plugin
  yarn add --dev html-webpack-plugin
# Webpack 4
  npm i --save-dev html-webpack-plugin@4
  yarn add --dev html-webpack-plugin@4

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html-webpack-plugin 插件

...

module.exports = {
    ...

    plugins:[
        new HtmlWebpackPlugin({
          filename: `index.html`, //生成的文件名
          template: path.resolve(__dirname, `src/index.html`), //源文件的绝对路径
        }),
    ]
    ...
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>webpack-demo</title>
  <script src="index.js"></script>
  <script defer="defer" src="index.js"></script>
</head>

<body>
  <div id="app"></div><input placeholder="input..."> <span class="iconfont">󰀒</span>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
  </ul>
  <div id="box"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack-demo</title>
  <!-- <script src="./index.js"></script> -->
  <!-- <script src="../dist/main.bundle.js"></script> -->
  <script src="index.js"></script>
</head>
<body>
  <div id="app"></div>
  <input type="text" placeholder="input...">
  <span class="iconfont">󰀒</span>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
  </ul>
  <div id="box"></div>
</body>
</html>

 new HtmlWebpackPlugin({
      title: `Webpack-Demo`, //标题
      filename: `index.html`, //生成的文件名
      template: path.resolve(__dirname, `src/index.html`), //源文件的绝对路径
      scriptLoading: 'defer', //以非阻塞的方式加载script脚本
      favicon: path.resolve(__dirname, `src/favicon.ico`), //配置网站图标
    }),