webpack学习（三）：配置HtmlWebpackPlugin

约定不等于承诺〃 2022-04-06 08:05 431阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
**webpack初步配置参照 [https://blog.csdn.net/qq593249106/article/details/84892069][https_blog.csdn.net_qq593249106_article_details_84892069]**

**当前目录结构:**

**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>

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

## 安装 HtmlWebpackPlugin 插件 ##

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

## 配置 webpack.config.js ##

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>webpack-demo06</title>
    </head>
    <body>
    
    </body>
    </html>

## 重新构建 ##

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

## 测试多入口文件 ##

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

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

**当前目录结构如下:**

修改一下 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**

## 重新构建 ##

终端输入 npm run build , 打开index.html:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]  
成功打包, 此时 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>

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84892069]: https://blog.csdn.net/qq593249106/article/details/84892069
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/600d6f66f69242719cda6aab908f7fe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220406/9325c7fef79e4263948fc8ddef7d0ae9.png