Webpack——html-webpack-plugin生成html文件webpack-html-plugin的作用当w

当webpack中不配置webpack-html-plugin时打包出来的dist文件夹中是没有.html文件的，需要我们手动去创建并引入打包后的js文件。webpack-html-plugin的作用就是在打包后自动创建一个.html文件并引用打包后的js文件

安装 html-webpack-plugin

npm install html-webpack-plugin@3.2.0 --save-dev

默认配置

html-webpack-plugin 默认会在 output.path文件夹下创建一个.html文件。并在这个文件中插入一个 script 标签，标签的 src 为 output.filename。

// webpack.config.js
const {resolve} = require("path");
// 引入 html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:"./index.js",
    output:{
        path:resolve(__dirname,"dist"),
        filename:"build.js"
    },
    module:{
        rules:[]
    },
    plugins:[
        {
            // 1.默认配置
            // new HtmlWebpackPlugin(),
            // 2.以指定位置的html文件为模板进行打包，并自动引入打包后的build.js文件
            new HtmlWebpackPlugin({
              template: './src/index.html',
            })
        }
    ],
    mode:"development"
}

默认配置下打包生成的.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
      <script type="text/javascript" src="build.js"></script>
  </body>
</html>

配置模板html文件打包生成的.html文件

// src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
      <span>测试html文件</span>
  </body>
</html>


// dist/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
      <span>测试html文件</span>
      <script type="text/javascript" src="build.js"></script>
  </body>
</html>