webpack系列博客中代码均在github上：https://github.com/JEmbrace/webpack-practice

《webpack实践（一）- 先入个门》

《webpack实践（二）- webpack配置文件》

《webpack实践（三）- html-webpack-plugin》

《webpack实践（四）- html-webpack-plugin》

一.前言

　　前面两篇文章中，我们实践了webpack cli和配置文件这两种打包方式，然而在验证的时候，均是手动将打包后的结果文件index.bundle.js添加到index.html中。

　　这显然脱离了我们实际的开发流程：实际开发中，通常引入的外部文件名都是已知的，而我们需要引入的文件名还需要在打包完成后才能确定。

　　那么今天我们要学习的这个html-wepback-plugin就解决这个问题。

二.安装

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

　　

三.使用　　

　　参考官方文档的示例，我们来使用一下这个插件

1.基本用法

　　先将webpack.config.js的代码贴上来

// 第一步：引入

var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');

module.exports = {

  mode: 'development',

  entry: {

    main: './index.js'

  },

  output: {

    path: path.resolve(__dirname,'dist'),

    filename: 'index.bundle.js'

  },

  // 第二步：创建html-webpack-plugin的实例，配置到plugins选项中

  plugins:[

    new htmlWepackPlugin()

  ]

};

　　可以看到添加html-webpack-plugin的基本使用方法就是两个步骤：

　　　　使用require引入

　　　　创建实例对象并配置到plugins选项中

　　为了看清楚添加这个插件的效果，我们将前两篇文章中根目录下的index.html和dist删除

　　

　 现在，我们在使用webpack命令进行打包

　　

查看打包后的生成的文件和目录

　　

　　可以看到打包完成后，在项目根目录下生成了一个dist目录，在该目录下生成了一个indx.bundle.js脚本文件和一个index.html模板文件。

　　index.bundle.js文件和前两节打包的结果文件内容一致。

　　index.html内容如下

　　dist/index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  </head>

  <body>

  <script type="text/javascript" src="index.bundle.js"></script></body>

</html>

　　这个indx.html就是html-webpack-plugin这个插件帮我们生成的，而且它还将打包后的结果文件index.bundle.js引入到了界面中。这样是不是有点有贴近我们平时的开发了。

　　实际上，日常项目开发中，通常我们会有自己html模板，因此我们还需要对这个插件做一些配置，让它使用我们的模板并且将打包后的结果文件自动引入到我们编写的模板中。

2.配置模板

　　配置模板需要在创建html-webpack-plugin示例是传入template参数。

　　template: 模板路径和模板名称

　　现在我们将template的配置添加到webpack.config.js配置文件中

// 第一步：引入

var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');

module.exports = {

  mode: 'development',

  entry: {

    main: './index.js'

  },

  output: {

    path: path.resolve(__dirname,'dist'),

    filename: 'index.bundle.js'

  },

  // 第二步：创建html-webpack-plugin的实例，配置到plugins选项中

  plugins:[

    new htmlWepackPlugin({

      template: './index.html'

    })

  ]

};

　　在此我们还需要做两件事：

　　　　删除基本用法中生成的dist目录

　　　　在根目录下新建我们的模板文件index.html

　　

　　index.html的内容如下：

<html>

    <head>

        <meta charset="utf-8" />

    </head>

    <body>

        <h1>webpack实践（三）- html-webpack-plugin</h1>

    </body>

</html>

　　最后，我们在进行一次打包

　　

　　

　 dist目录下的index.bundle.js文件还是和之前一样，我们看一下index.html文件的内容

<html>

    <head>

        <meta charset="utf-8" />

    </head>

    <body>

        <h1>webpack实践（三）- html-webpack-plugin</h1>

    <script type="text/javascript" src="index.bundle.js"></script></body>

</html>

　　可以看到dist/index.html已经将打包后的结果文件index.bundle.js引入。

　　浏览器打开dist/index.html验证结果：

　　

　 和之前的结果一致。

　　到此，本节内容结束，下一篇将深入学习总结一下html-webpack-plugin除template之外更多的配置项。

　　

　　

webpack实践（三）- html-webpack-plugin的更多相关文章

  1. webpack入坑之旅（三）webpack.config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. npm scripts + webpack 实践经验（React、Nodejs）

    最近用Webpack+npm scripts+Mongodb+Nodejs+React写了个后台项目,在用Webpack构建过程中遇到了许多坑,就写出来分享一下. 构建工具五花八门,想当年刚学会Gru ...

  3. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  4. webpack实践总结

    一.Loader写法及执行顺序 从webpack2起,loader的格式如下: module: { rules: [ {test: /\.css$/, use: ['style-loader','cs ...

  5. webpack实践（一）- 先入个门

    一.前言   webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)   在我以前做纯html.css. ...

  6. webpack实践（二）- webpack配置文件

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  7. webpack实践（四）- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  8. vue第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

    第三单元(webpack的应用-能根据具体的需求构建对应的开发环境) #课程目标 理解什么是单页面应用. 掌握单页面和多页面的差异. 了解单页面的实现原理. 掌握模块化的方式实现webpack配置,区 ...

  9. 三种Webpack打包方式

    准备工作mkdir webpack_demo && cd webpack_demo #新建文件夹npm init #创建package.json文件npm install --save ...

随机推荐

  1. windows 10上源码编译libjpeg-turbo和使用教程 | compile and use libjpeg-turbo on windows 10

    本文首发于个人博客https://kezunlin.me/post/83828674/,欢迎阅读! compile and use libjpeg-turbo on windows 10 Series ...

  2. PHP数组具有的特性有哪些

    PHP 的数组是一种非常强大灵活的数据类型.以下是PHP数组具有的一些特性: 1.可以使用数字或字符串作为数组键值 1 $arr = [1 => 'ok', 'one' => 'hello ...

  3. NN入门，手把手教你用Numpy手撕NN(三)

    NN入门,手把手教你用Numpy手撕NN(3) 这是一篇包含极少数学的CNN入门文章 上篇文章中简单介绍了NN的反向传播,并利用反向传播实现了一个简单的NN,在这篇文章中将介绍一下CNN. CNN C ...

  4. Redis系列（三）：Redis集群的水平扩展与伸缩

    一.Redis集群的水平扩展 Redis3.0版本以后,有了集群的功能,提供了比之前版本的哨兵模式更高的性能与可用性,但是集群的水平扩展却比较麻烦,接下来介绍下Redis高可用集群如何做水平扩展,在原 ...

  5. 5. 彤哥说netty系列之Java NIO核心组件之Channel

    你好,我是彤哥,本篇是netty系列的第五篇. 简介 上一章我们一起学习了如何使用Java原生NIO实现群聊系统,这章我们一起来看看Java NIO的核心组件之一--Channel. 思维转变 首先, ...

  6. python接口设计中的__all__和del

    最近在实现python接口中遇到了一些小问题,解决后总结如下. 目的:在设计接口时,只暴露某个文件的特定方法. 例如: t.py import os import sys def a(): pass ...

  7. nginx实现前后台分离部署

    2.1         前后台分离部署 (一)       组网图 (二)       简要说明: 如标题所示,至于为什么要前后台分离部署,个人理解的原因有三 (一)   便于部署 前台代码由ngin ...

  8. redis的主从复制，以及使用sentinel自动处理主机宕机问题,集群

    以下部分想看懂得有一定的redis基础,且步骤是连贯的,错一步都不行.redis运行多个实例,不懂得自行百度. 1. redis主从同步 原理: 从服务器向主服务器发送 SYNC 命令. 接到 SYN ...

  9. SpringBoot：带你认认真真梳理一遍自动装配原理

    前言 Spring翻译为中文是“春天”,的确,在某段时间内,它给Java开发人员带来过春天,但是随着我们项目规模的扩大,Spring需要配置的地方就越来越多,夸张点说,“配置两小时,Coding五分钟 ...

  10. 【ASP.NET Core学习】Web API

    这里介绍在ASP.NET Core中使用Web API创建 RESTful 服务,本文使用VSCode + NET Core3.0 创建简单Rest API 格式化输出 JSON Patch请求 Op ...