webpack插件配置（二）- HtmlWebpackPlugin

程序员晓萌技术 2022年11月19日

0 收藏 348 点赞 3,127 浏览 1256 个字

作用

简化Html文件的创建，以便为你的webpack bundle包提供服务。这对于在文件名中包含每次会随着编译而发生变化的hash的webpack bundle尤其有用。插件可以生成一个HTML文件。

安装

安装在开发环境，生产环境不需要安装

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

如何在webpack.config.js中配置

1. 无参配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

结果：这将会产生一个包含以下内容的dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

结论一：插件生成的文件默认名称为index.html

结论二：插件生成的路径为output中指定的path路径

结论三：生成的html文件中会自动引用output目录下的bundle文件

2.template参数

首先在项目根路径下增加index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Caching</title>
  </head>
  <body>
  <div id=app></div>
 </body>
</html>

配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
    ],
};

生成dist/index.html内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Caching</title>
  </head>
  <body>
  <div id=app></div>
 <script type="text/javascript" src="bundle.js"></script></body>
</html>

结论四：可以通过template配置生成的html模板

官方文档