webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板

最新推荐文章于 2021-06-16 17:52:37 发布
最新推荐文章于 2021-06-16 17:52:37 发布
阅读量278 收藏
点赞数
文章标签： webpack 后端 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000007126268
版权
本文首发于 Array_Huang的技术博客—— 实用至上，非经作者同意，请勿转载。
原文地址： https://segmentfault.com/a/1190000007126268
如果您对本系列文章感兴趣，欢迎关注订阅这里： https://segmentfault.com/blog/array_huang

为什么要用webpack来生成HTML页面

按照我们前面的十一篇的内容来看，自己写一个HTML页面，然后在上面加载webpack打包的js或其它类型的资源，感觉不也用得好好的么？

是的没错，不用webpack用requireJs其实也可以啊，甚至于，传统那种人工管理模块依赖的做法也没有什么问题嘛。

但既然你都已经看到这一篇了，想必早已和我一样，追求着以下这几点吧：

  • 更懒，能自动化的事情绝不做第二遍。
  • 更放心，调通的代码比人靠谱，更不容易出错。
  • 代码洁癖，什么东西该放哪，一点都不能含糊，混在一起我就要死了。

那么，废话不多说，下面就来说说使用webpack生成HTML页面有哪些好处吧。

对多个页面共有的部分实现复用

在实际项目的开发过程中，我们会发现，虽然一个项目里会有很多个页面，但这些页面总有那么几个部分是相同或相似的，尤其是页头页尾，基本上是完全一致的。那我们要怎么处理这些共有的部分呢？

复制粘贴流
不就是复制粘贴的事嘛？写好一份完整的HTML页面，做下个页面的时候，直接copy一份文件，然后直接在copy的文件上进行修改不就好了吗？

谁是这么想这么做的，放学留下来，我保证不打死你！我曾经接受过这么一套系统，顶部栏菜单想加点东西，就要每个页面都改一遍，可维护性烂到爆啊。

Iframe流

Iframe流常见于管理后台类项目，可维护性OK，就是缺陷比较多，比如说：

  • 点击某个菜单，页面是加载出来了但是浏览器地址栏上的URL没变，刷新的话又回到首页了。
  • 搜索引擎收录完蛋，前台项目一般不能用Iframe来布局。
  • 没有逼格，Low爆了，这是最重要的一点（大误）。
SPA流

最近这几年，随着移动互联网的兴起，SPA也变得非常常见了。不过SPA的局限性也非常大，比如搜索引擎无法收录，但我个人最在意的，是它太复杂了，尤其是一些本来业务逻辑就多的系统，很容易懵圈。

后端模板渲染

这倒真是一个办法，只是，需要后端的配合，利用后端代码把页面的各个部分给拼合在一起，所以这方法对前端起家的程序员还是有点门槛的。

利用前端模板引擎生成HTML页面

所谓“用webpack生成HTML页面”，其实也并不是webpack起的核心作用，实际上靠的还是前端的模板引擎将页面的各个部分给拼合在一起来达到公共区域的复用。webpack更多的是组织统筹整个生成HTML页面的过程，并提供更大的控制力。最终，webpack生成的到底是完整的页面，还是供后端渲染的模板，就全看你自己把控了，非常灵活，外人甚至察觉不出来这到底是你自己写的还是代码统一生成的。

处理资源的动态路径

如果你想用在文件名上加hash的方法作为缓存方案的话，那么用webpack生成HTML页面就成为你唯一的选择了，因为随着文件的变动，它的hash也会变化，那么整个文件名都会改变，你总不能在每次编译后都手动修改加载路径吧？还是放心交给webpack吧。

自动加载webpack生成的css、less

如果你使用webpack来生成HTML页面，那么，你可以配置好每个页面加载的chunk（webpack打包后生成的js文件），生成出来的页面会自动用<script>来加载这些chunk，路径什么的你都不用管了哈（当然前提是你配置好了output.publicPath）。另外，用extract-text-webpack-plugin打包好的css文件，webpack也会帮你自动添加到<link>里，相当方便。

彻底分离源文件目录和生成文件目录

使用webpack生成出来的HTML页面可以很安心地跟webpack打包好的其它资源放到一起，相对于另起一个目录专门存放HTML页面文件来说，整个文件目录结构更加合理：

build
  - index
    - index
      - entry.js
      - page.html
    - login
      - entry.js
      - page.html
      - styles.css

如何利用webpack生成HTML页面

webpack生成HTML页面主要是通过html-webpack-plugin来实现的，下面来介绍如何实现。

html-webpack-plugin的配置项

每一个html-webpack-plugin的对象实例都只针对/生成一个页面，因此，我们做多页应用的话，就要配置多个html-webpack-plugin的对象实例：

pageArr.forEach((page) => {
  const htmlPlugin = new HtmlWebpackPlugin({
    filename: `${page}/page.html`,
    template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
    chunks: [page, 'commons'],
    hash: true, // 为静态资源生成hash值
    minify: true,
    xhtml: true,
  });
  configPlugins.push(htmlPlugin);
});

pageArr实际上是各个chunk的name，由于我在output.filename设置的是'[name]/entry.js'，因此也起到构建文件目录结构的效果（具体请看这里），附上pageArr的定义：

module.exports = [
  'index/login',
  'index/index',
  'alert/index',
  'user/edit-password', 'user/modify-info',
];

html-webpack-plugin的配置项真不少，这里仅列出多页应用常用到的配置：

  • filename，生成的网页HTML文件的文件名，注意可以利用/来控制文件目录结构的，其最终生成的路径，是基于webpack配置中的output.path的。
  • template，指定一个基于某种模板引擎语法的模板文件，html-webpack-plugin默认支持ejs格式的模板文件，如果你想使用其它格式的模板文件，那么需要在webpack配置里设置好相应的loader，比如handlebars-loader啊html-loader啊之类的。如果不指定这个参数，html-webpack-plugin会使用一份默认的ejs模板进行渲染。如果你做的是简单的SPA应用，那么这个参数不指定也行，但对于多页应用来说，我们就依赖模板引擎给我们拼装页面了，所以这个参数非常重要。
  • inject，指示把加载js文件用的<script>插入到哪里，默认是插到<body>的末端，如果设置为'head'，则把<script>插入到<head>里。
  • minify，生成压缩后的HTML代码。
  • hash，在由html-webpack-plugin负责加载的js/css文件的网址末尾加个URL参数，此URL参数的值是代表本次编译的一个hash值，每次编译后该hash值都会变化，属于缓存解决方案。
  • chunks，以数组的形式指定由html-webpack-plugin负责加载的chunk文件（打包后生成的js文件），不指定的话就会加载所有的chunk。

生成一个简单的页面

下面提供一份供生成简单页面（之所以说简单，是因为不指定页面模板，仅用默认模板）的配置：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: '简单页面',
    filename: 'index.html',
  })],
};

使用这份配置编译后，会在dist目录下生成一个index.html，内容如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>简单页面</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

由于没有指定模板文件，因此生成出来的HTML文件仅有最基本的HTML结构，并不带实质内容。可以看出，这更适合React这种把HTML藏js里的方案。

利用模板引擎获取更大的控制力

接下来，我们演示如何通过制定模板文件来生成HTML的内容，由于html-webpack-plugin原生支持ejs模板，因此这里也以ejs作为演示对象：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
  </body>
</html>

'html-webpack-plugin'的配置里也要指定template参数：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: '按照ejs模板生成出来的页面',
    filename: 'index.html',
    template: 'index.ejs',
  })],
};

那么，最后生成出来的HTML文件会是这样的：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title>按照ejs模板生成出来的页面</title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
    <script src="index_bundle.js"></script>
  </body>
</html>

到这里，我们已经可以控制整个HTML文件的内容了，那么生成后端渲染所需的模板也就不是什么难事了，以PHP的模板引擎smarty为例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
    <p>这是用smarty生成的内容：<b>{$articleContent}</b></p>
  </body>
</html>

处理资源的动态路径

接下来在上面例子的基础上，我们演示如何处理资源的动态路径：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.[chunkhash].js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: '按照ejs模板生成出来的页面',
    filename: 'index.html',
    template: 'index.ejs',
  })],
  module: {
    loaders: {
      // 图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
      // 如下配置，将小于8192byte的图片转成base64码
      test: /\.(png|jpg|gif)$/,
      loader: 'url?limit=8192&name=./static/img/[hash].[ext]',
    },
  },
};
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
    <img src="<%= require('./imgs/login-bg.jpg')  %>" />
  </body>
</html>

我们改动了什么呢？

  1. 参数output.filename里，我们添了个变量[chunkhash]，这个变量的值会随chunk内容的变化而变化，那么，这个chunk文件最终的路径就会是一个动态路径了。
  2. 我们在页面上添加了一个<img>，它的src是require一张图片，相应地，我们配置了针对图片的loader配置，如果图片比较小，require()就会返回DataUrl，而如果图片比较大，则会拷贝到dist/static/img/目录下，并返回新图片的路径。

下面来看看，到底html-webpack-plugin能不能处理好这些动态的路径。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title>按照ejs模板生成出来的页面</title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
    <img src="https://img-blog.csdnimg.cn/2022010709140618161.jpeg" />
    <script src="index_bundle.c3a064486c8318e5e11a.js"></script>
  </body>
</html>

显然，html-webpack-plugin成功地将chunk加载了，又处理好了转化为DataUrl格式的图片，这一切，都是我们手工难以完成的事情。

还未结束

至此，我们实现了使用webpack生成HTML页面并尝到了它所带来的甜头，但我们尚未实现“对多个页面共有的部分实现复用”，下一篇《webpack多页应用架构系列（十三）：构建一个简单的模板布局系统》我们就来介绍这部分的内容。

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

附系列文章目录（同步更新）

本文首发于 Array_Huang的技术博客—— 实用至上，非经作者同意，请勿转载。
原文地址： https://segmentfault.com/a/1190000007126268
如果您对本系列文章感兴趣，欢迎关注订阅这里： https://segmentfault.com/blog/array_huang
weixin_33770878
关注
webpack对html模版的处理
周家大小姐
03-16 1万+
1.首先我们要加公共的base.js加载进来; 现把公共的css加载进来 在浏览中打开;发现成功加载 加载进来其实并不是正直的解决问题 ;问题是在于;我们的html是在我们定义的文件夹下;并不是在dist下: 我们发布的时候只会发dist;还有就是如果那么多版本,不可能每个版本都手写 &lt;link rel="stylesheet" href="../../dist/css/...
webpack 打包之html多个打包 -2
zhoulucky1993的博客
12-23 2747
1：确保自己的电脑已经安装了node和Git软件 2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：     1：npm install webpack -g                 2:  npm install webpack-cli -g     3: npm init -y ...
2.【webpack】打包编译生成html
天下武功唯CODING不破
06-19 1759
在上一篇中讲到了webpack的简单使用，从webpack的初始化，项目创建到项目编译，在本篇为大家讲解webpack如何打包html 目录 --------------------------- 1.【webpack】初识及项目创建 2.【webpack】打包编译生成html 首先接着上一篇，我们就看一下项目的目录文件情况： 接着为大家讲解webpack中plugins插件的作用...
(精华)2020年7月10日 webpack html文件的编译
热门推荐
时光隧道
07-10 55万+
var htmlWebpackPlugin = require('html-webpack-plugin'); // 声明/dist的路径 为成绝对路径 module.exports = { // 模块解析 module: {}, // 插件 plugins: [ new htmlWebpackPlugin({ filename: path.resolve(DIST_PATH, 'index.html'), //就是 html 文件的文件名，默认是index.html
webpack 编译html模板文件
weixin_34413103的博客
09-18 510
1、项目结构   安装loader： npm i html-loader --save-dev npm i ejs-loader --save-dev     2、模板文件layer.html &lt;div class="layer"&gt; &lt;div&gt;this is a layer&lt;/div&gt; &lt;/div&gt; ...
webpack编译多个html
青阳的博客
06-04 698
通过webpack编译打包多个html，通过webpack-dev-server自动刷新启动服务，解决webpack-cli跟webpack-dev-server版本不兼容问题
浅谈webpack+react多页面开发终极架构
10-17
随着React框架和Webpack模块打包工具的流行，开发者越来越多地利用这些技术来构建复杂的多页面应用。 首先，Webpack是一个强大的模块打包器，它在SPA项目中广泛应用于将JavaScript文件、样式、图片等资源进行依赖...
webpack-multiple:webpack5 多页面脚手架
05-09
**Webpack 5 多页面应用构建详解** Webpack 5 是一款强大的模块打包工具，它能够将 JavaScript、CSS、图片等静态资源转换成浏览器可以识别的格式。在开发大型多页面应用时，合理地配置和使用 Webpack 可以极大地...
Node.js-webpack4ejsexpress多页应用项目架构模板
08-10
**Node.js webpack4 ejs express 多页应用项目架构模板** 在现代Web开发中，构建一个功能丰富的多页面应用程序（Multi-Page Application, MPAs）是常见的需求。本项目架构模板利用了Node.js、webpack4、ejs模板引擎...
webpack-seed：这是一个基于webpack的多页应用脚手架
02-06
更适合多页应用。 既可实现全理论分离，也可以生成微观渲染所需要的模板。 约会布局和组件的概念，方便多页面间对布局，组件的重用，妈妈再也不用担心我是选SPA呢还是Iframe了，咱们都！不！需！要！ 编译后的程序不...
一个基于reactwebpack的多页面应用脚手架
08-11
总的来说，基于React和Webpack的多页面应用脚手架简化了开发流程，使开发者能够专注于业务逻辑，而不必花费过多时间在基础架构上。通过学习和掌握这些知识点，开发者可以高效地构建和维护复杂且高性能的多页面应用。
webpack配置之html-webpack-plugin
天空影
04-26 2587
用途：我们可以直接在src文件夹写html文件，打包后会自动在dist文件夹下生成这个html文件，并直接引用配置的js文件 示例：webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ "main":"./src/js/ma...
webpack - 自动化生成项目中的html页面(上)
zjsfdx的博客
10-26 9295
1.安装插件html-webpack-plugin 在终端输入命令如下： cnpm install html-webpack-plugin –save-dev2.进入webpack.config.js，加入一行代码，引用该插件，var htmlWebpackPlugin = require('html-webpack-plugin');同时写入plugins属性，对插件进行初始化plugins:
webpack基础一个最基础的打包 html + js + css
weixin_30469385的博客
06-18 5464
看了一大堆webpack的例子，最终发现都是神仙打架了。 我觉得首先只要能够搭起来一个最基本的项目入了门，以后就可以自己慢慢的往里钻研了。 所以今天搭了一个webpack的项目 ok，GO 1、初始化一个npm项目 npm i -y 2、安装webpack，4.0以上装webpack-cli npm i webpack webpack-cli -D 3、改pac...
webpack 处理html中img的src引入的图片
wzs_xyz的专栏
06-23 3万+
webpack在管理模块，处理各种资源上都是无往不利，但唯独在处理html上比较困难，不识别html中img标签src引入的图片。 html-webpack-plugin这种插件辅助处理html非常好，但却仍然未解决html代码中的图片问题，未免美中不足。在遍寻开源模块无果后，认真研究webpack的loader和plugin后，终于解决了这个问题。从npm安装模块npm i html-withi
node中引入其他ejs文件，并给引入文件传参，类似iframe
浩星
06-16 784
前言： node在开发的时候也是可能存在多个页面互相调用的问题，在原生js中是有iframe来支持，在vue中是可以直接引入的，那么在我们的node开发中应该怎么弄呢？这里分享下 使用方法：include 具体使用步骤： 1、定义路径 router.get('/home', function(req, res, next) { let str = { title: '嗨起来' } res.render('home', str); }); 2、home.e...
16、webpack代码分离--防止公用代码的重复导入
gosenkle的专栏
06-13 1444
防止重复(prevent duplication) webpack 官网文档里建议使用CommonsChunkPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。但是实际上这个插件在4.3的版本中已经移除，你使用这个插件编译后汇报错，出现“Webpack.optimize.CommonsChunkPlugin has been remo...
教你如何使用webpack打包你的项目
u012631731的博客
06-25 8万+
webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。
webpack-mvc：传统多页面组件化开发实践与配置解析
"本文主要探讨了如何在传统的MVC架构中使用webpack-mvc进行多页面组件化的开发，通过webpack 4结合ejs模板引擎，实现前端与后端的彻底分离，提高项目的可维护性和效率。文章列举了所需的关键配置和插件，并展示了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值