0x001 概述

上一章之后已经可以自动刷新浏览器了，大大方便了我们的开发，这章开始讲插件，第一个插件将会解决上一章节的一个问题，那就是index.html需要手动插入打包好的js，同时不会将index.html一起放到dist文件夹下的问题。

0x002 初始化项目

  1. 创建项目文件夹0x003-html-webpack-plugin，我们将在这个文件夹底下开始这一章节的所有编码

  2. 复制上一章的文件及其目录，除了dist和index.html

    + webpack-study+ 0x001-begin+ 0x002-dev-server+ 0x003-html-webpack-plugin+ src- index.js- package.json- webpack.config.js

0x003 简单配置html-webpack-plugin并使用

  1. 安装

    # 终端输入
$ cnpm install --save-dev html-webpack-plugin
# 输出
✔ Installed 3 packages
...
✔ All packages installed (473 packages installed from npm registry, used 7s, speed 1.08MB/s, json 434(768.7kB), tarball 7.09MB)
  2. 配置

  • 初始化插件

    var HtmlWebpackPlugin = require('html-webpack-plugin');

  • 添加插件

    plugins  : [new HtmlWebpackPlugin()
]

  • 最终配置文件

    var path              = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry    : './src/index.js',output   : {path    : path.resolve(__dirname, 'dist'),filename: 'index.js'},devServer: {contentBase: path.resolve(__dirname, ''),port       : 9000,compress   : true,open       : true,host       : '0.0.0.0',index      : 'index.html'},plugins  : [new HtmlWebpackPlugin()]
}

  1. 打包

    $ npm run build
Hash: 1d3993547a22839c5053
Version: webpack 3.8.1
Time: 413msAsset       Size  Chunks             Chunk Namesindex.js  510 bytes       0  [emitted]  main
index.html  181 bytes          [emitted]  [0] ./src/index.js 32 bytes {0} [built]
Child html-webpack-plugin for "index.html":1 asset[2] (webpack)/buildin/global.js 488 bytes {0} [built][2] (webpack)/buildin/module.js 495 bytes {0} [built]+ 2 hidden modules

    此时查看dist，会发现生成了两个文件

  • index.js：webpack打包生成的js文件

  • index.html：htmlWebpackPlugin自动生成
    观察index.html可以发现，htmlWebpackPlugin不只是生成了一个html文件，还添加了对我们打包生成的index.js的引用。

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

0x004 插件配置

  1. 自定义title

    • 添加配置

      // package.json
new HtmlWebpackPlugin({title: '自动插入标题'})

    • 打包

      <!-- dist/index.html -->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>自动插入标题</title></head><body><script type="text/javascript" src="index.js"></script></body>
</html>

  2. 自定义文件名

    • 添加配置

          new HtmlWebpackPlugin({title   : '自动插入标题',filename: 'admin.html',}）

    • 打包查看文件

      + dist- admin.html- index.js

  3. 根据模板生成

    • 添加模板文件./index.html

      <!-- ./index.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><p>这是一个模板文件</p>
</body>
</html>

    • 添加配置

       new HtmlWebpackPlugin({title   : '自动插入标题',filename: 'admin.html',template      : path.resolve(__dirname, 'index.html')})

    • 打包

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body><p>这是一个模板文件</p>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

  4. 自定义js文件注入位置

    • 添加配置

          new HtmlWebpackPlugin({title   : '自动插入标题',filename: 'admin.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head' })

    • 打包

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<p>这是一个模板文件</p>
</body>
</html>

    • 可配置的值：

      • true：注入
      • false：不注入
      • 'head'：注入头部
      • 'body'：注入body底部

  5. 压缩html

    • 添加配置

              new HtmlWebpackPlugin({title         : '自动插入标题',filename      : 'admin.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',minify:{collapseWhitespace:true,}
}),

    • 打包

      <!-- ./dist/admin.html -->
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index3.112a255042f8daa92065.js"></script></head><body><p>这是一个模板文件</p></body></html>
    • 可选配置
      这里的值是一个对象，具体可以配置哪些可以看html-minifier的配置说明

  6. 多入口的情况下自定义插入的chunk

    • 添加入口文件index2.js、index3.js

      // ./src/index2.js
document.write('hello index2')
// ./src/index3.js
document.write('hello index3')

    • 修改entry、output、plugin

      var path              = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry    : {index1: './src/index.js',index2: './src/index2.js',index3: './src/index3.js',},output   : {path    : path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},devServer: {contentBase: path.resolve(__dirname, ''),port       : 9000,compress   : true,open       : true,host       : '0.0.0.0',index      : 'index.html'},plugins  : [new HtmlWebpackPlugin({title   : '自动插入标题',filename: 'admin.html',template: path.resolve(__dirname, 'index.html'),inject  : 'head',chunks  : ['index', 'index3']})]
}
      • 打包
      <!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index3.112a255042f8daa92065.js"></script>
</head>
<body>
<p>这是一个模板文件</p>
</body>
</html>

      注意：注入的顺序和chunks的顺序相反

  7. 自定义注入chunk的顺序

    • 修改配置

          new HtmlWebpackPlugin({title         : '自动插入标题',filename      : 'admin.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',chunks        : ['index1', 'index3'],chunksSortMode: function (chunk1, chunk2) {return -1;}})

    • 打包

      <!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script type="text/javascript" src="index3.112a255042f8daa92065.js"></script><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script>
</head>
<body>
<p>这是一个模板文件</p>
</body>
</html>

    • 可选值

      • none：不排序
      • 'auto'：根据thunk的id排序
      • 'dependency'：根据依赖排序
      • 'manual'：找不到文档啊，不知道说的是啥
      • function：提供一个函数计算排序方式，会自动调用这个函数来计算排序，可以根据chunk1.names[0]和chunk2.names[0]对比计算出来，如果返回大于1的数，则chunk1在前，chunk2在后，反之亦然。调试的时候可以直接在函数中console.log(chunk1, chunk2)来调试。

  8. 生成多页面

    • 修改配置

       plugins  : [new HtmlWebpackPlugin({title         : '自动插入标题',filename      : 'admin.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',chunks        : ['index1', 'index3'],chunksSortMode: function (chunk1, chunk2) {return 1;}}),new HtmlWebpackPlugin({title         : '第二个页面',filename      : 'index.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',chunks        : ['index1', 'index2'],chunksSortMode: function (chunk1, chunk2) {return 1;}})]

    • 打包并查看dist

      # dist 文件夹结构
+ dist- index.html- admin.html- ...<!-- ./dist/admin.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index3.112a255042f8daa92065.js"></script>
</head>
<body>
<p>这是一个模板文件</p>
</body>
</html><!-- ./dist/index.html -->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index2.72cf280e7df62106422b.js"></script></head><body><p>这是一个模板文件</p></body>
</html>

  9. 此时的配置

    // webpack.config.js
var path              = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry    : {index1: './src/index.js',index2: './src/index2.js',index3: './src/index3.js',},output   : {path    : path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},devServer: {contentBase: path.resolve(__dirname, ''),port       : 9000,compress   : true,open       : true,host       : '0.0.0.0',index      : 'index.html'},plugins  : [new HtmlWebpackPlugin({title         : '自动插入标题',filename      : 'admin.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',minify:{collapseWhitespace:true,},chunks        : ['index1', 'index3'],chunksSortMode: function (chunk1, chunk2) {return 1;}}),new HtmlWebpackPlugin({title         : '第二个页面',filename      : 'index.html',template      : path.resolve(__dirname, 'index.html'),inject        : 'head',minify:{collapseWhitespace:true,},chunks        : ['index1', 'index2'],chunksSortMode: function (chunk1, chunk2) {return 1;},})]
}
  10. 其他配置看这里

0x005 资源

  • 源代码

从零开始的webpack生活-0x003：html模板生成相关推荐

  1. 从零开始搭建webpack的vue生产/开发环境

    一.初始化项目 在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...

  2. 从零开始的操作系统生活01-Hello World

    从零开始的操作系统生活01-Hello World 0.目标 使用cpp开发一个操作系统,具体能走到哪一步看毅力,加油! 1.参考内容 视频链接1 视频链接2 2.开始 操作系统是一组主管并控制计算机 ...

  3. 从零开始的种田生活-Unity游戏开发

    从零开始的种田生活-Unity游戏开发 CSV中的静态数据读取 Json中的动态数据读取 ScriptableObject的使用 大家好,这里是暴躁老哥酒九.最近了我们的童年记忆<摩尔庄园> ...

  4. 从零开始使用webpack 搭建vue项目

    从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...

  5. 从零开始使用 Webpack 搭建 Vue3 开发环境

    从零开始使用 Webpack 搭建 Vue3 开发环境 前情提要 从零开始使用 Webpack 搭建 Vue 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init - ...

  6. 从零开始写一个武侠冒险游戏-3-地图生成

    2019独角兽企业重金招聘Python工程师标准>>> 从零开始写一个武侠冒险游戏-3-地图生成 概述 前面两章我们设计了角色的状态, 绘制出了角色, 并且赋予角色动作, 现在是时候 ...

  7. python excel处理框架_django框架基于模板 生成 excel(xls) 文件操作示例

    本文实例讲述了django框架基于模板 生成 excel(xls) 文件操作.分享给大家供大家参考,具体如下: 生成Excel 文件,很多人会采用一些开源的库来实现,比如python 自带 csv 库 ...

  8. 创建代码生成器可以很简单：如何通过T4模板生成代码？[下篇]

    在<上篇>中我们通过T4模板为我们指定的数据表成功生成了我们需要的用于添加.修改和删除操作的存储过程.但是这是一种基于单个文件的解决方案,即我们必须为每一个生成的存储过程建立一个模板.如果 ...

  9. [转]MVC实用架构设计（三）——EF-Code First（3）：使用T4模板生成相似代码

    本文转自:http://www.cnblogs.com/guomingfeng/p/mvc-ef-t4.html 〇.目录 一.前言 二.工具准备 三.T4代码生成预热 (一) 单文件生成:Hello ...

最新文章

  1. Jquery常用操作：checkbox、select取值，radio、checkbox、select选中及其相关
  2. 归纳推理测试没做完_朋友买了1斤紫菜，2年还没吃完，我教他这样做，2个月就吃完了...
  3. Android ADB 源码分析（三）
  4. js list操作_使用 Node.js 实现一个命令行 todo-list（1）- 基本功能
  5. DB2造数据存储过程
  6. valueOf()和toString()详解
  7. mkfs.xfs 命令找不到的解决方法
  8. inDesign教程，如何创建和编辑页面？
  9. 从弧长的计算到逆时针与顺时针旋转的定义 （二维空间）
  10. 信号与系统 Matlab 实验 画连续离散系统零极点图 分析连续、离散系统的频率特性 幅频特性曲线 相频特性曲线
  11. 任天堂xci文件提取romfs
  12. 最全面、最详细web前端面试题及答案总结
  13. 【算法】并查集（Java）
  14. Percona数据库备份
  15. python中sorted函数逆序_python中sorted函数
  16. 怎么根据分隔符号将Excel数据换行复制
  17. MindManager思维导图画法教程
  18. 用计算机处理表格说课稿,《制作表格》说课稿
  19. 用AI语音机器人有哪些需要注意事项
  20. 网络直播电视之M3U8解析篇 （下）

热门文章

  1. setFilters使用方法
  2. list 去重_测试面试题集Python列表去重
  3. 根据输入的日期计算你活了多少天（新手）
  4. 字符串模糊/精确查询——mysql
  5. Monokai风格的EditPlus配色方案
  6. [CF816B] Karen and Coffee（前缀和，思维）
  7. Mac中使用port升级gcc版本
  8. Postman---html中get和post的区别和使用
  9. servlet之控制分发
  10. 设计模式-模板模式-个人理解