webpack学习（三）：配置HtmlWebpackPlugin

最新推荐文章于 2025-05-06 23:03:00 发布

Lkkkkkkg

最新推荐文章于 2025-05-06 23:03:00 发布

阅读量749

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq593249106/article/details/84900169

webpack 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用HtmlWebpackPlugin插件简化webpack构建过程，通过模板生成自动引用出口文件的html，包括单入口和多入口文件的配置及测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo地址: https://github.com/Lkkkkkkg/webpack-demo
webpack初步配置参照 https://blog.youkuaiyun.com/qq593249106/article/details/84892069

当前目录结构:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
|- package.json
|- webpack.config.js //webpack配置文件

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo06</title>
</head>
<body>
<script src="bundle.js"></script> <!--这是手动引用的bundle.js-->
</body>
</html>

先前配置的 index.html 中, 手动引用了bundle.js, 如果有多个入口文件, 则需要手动添加不同的出口文件, 会比较麻烦, 使用 HtmlWebpackPlugin 插件就可以使用模板生成html文件, 这个html文件会自动引用出口文件

安装 HtmlWebpackPlugin 插件

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

配置 webpack.config.js

要使用 HtmlWebpackPlugin , 不但要安装, 还需要在 webpack 配置文件中配置 plugins 使用这个插件:
webpack.config.js

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


module.exports = {
    entry: './src/index.js',
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

修改一下index.html, 不再手动引用出口文件bundle.js, 重新构建看看会发生什么:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-demo06</title>
</head>
<body>
<!--<script src="bundle.js"></script> 不再手动引入出口文件-->
</body>
</html>

重新构建

终端输入 npm run build , 打开index.html:
在这里插入图片描述
打包成功, 成功自动引入了 bundle.js 输出了内容

测试多入口文件

在 src 目录下添加多一个 print.js:
print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

当前目录结构如下:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件1
  |- print.js //入口文件2
|- package.json
|- webpack.config.js //webpack配置文件

修改一下 index.js , 在 index.js 中引用 print.js:
index.js

import _ from 'lodash';
import printMe from './print.js';

function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button'); //新建一个button对象

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法

    btn.innerHTML = 'Click me and check the console!'; 
    btn.onclick = printMe; //button触发的事件是引用的print.js暴露的事件

    element.appendChild(btn); //把button对象插入div中

    return element;
}

document.body.appendChild(component());

配置 webpack.config.js

配置多个入口文件:
webpack.config.js

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


module.exports = {
    entry: {
        app: './src/index.js', //多个入口文件
        print: './src/print.js'
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
        })
    ],
    output: {
        filename: '[name].bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

重新构建

终端输入 npm run build , 打开index.html:
在这里插入图片描述
成功打包, 此时 index.html 也发生了相应的变化:
index.html

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