webpack多页面开发实践


Posted in Javascript onDecember 18, 2017

写在前面

webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理。而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型。希望大家适合使用。

在最开始接触webpack的时候,我都觉得webpack只适用于单页面应用,比如webpack+react,webpack+vue。我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便。基于实际项目需求,我在想,多页面站点是否也能使用webapck来构建呢?于是就开始了一番探索,最终算是搭建了一套比较完整的解决方案。

本文以一个实际项目为例子,讲述在多页面项目中如何使用webpack进行工程化构建。本文是自己的实践经验总结,所以有些解决方案并不是最优的,仍在探索优化中,如果有什么错误纰漏,欢迎指出。

简介

本项目主要基于webpack2.x构建,以gulp作为辅助工具。前端使用art-template作为模板引擎,一个页面对应一个模板文件和一个入口文件,入口文件中可以通过import或require引入其他模块,这些模块webpack会自动跟入口文件合并为一个文件。

前端开发环境搭建

主要目录结构

├─dist          #打包后生成的文件目录
└─src           #开发目录
  ├─components     #通用组件
  ├─static       #静态资源目录
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #站点通用组件对应的js
  │   ├─lib     #第三方js库
  │   ├─services   #各页面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #页面
   main.js       #公共入口
gulpfile.js        #gulp任务配置
package.json       #项目依赖
webpack.config.js     #webpack配置

webpack配置

入口文件

// 获取入口文件
var entries = (function() {
  var jsDir = path.resolve(__dirname, 'src/static/js/services');
  var entryFiles = glob.sync(jsDir + '/*.js');
  var map = {};

  entryFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    map[filename] = filePath;
  });
  return map;
})();

该方法将生成文件名到文件绝对路径的map, 比如

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

热更新

热更新简直不要太好用,极大地提高了开发效率。

//服务器配置
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

另外,在plugin中加入new webpack.HotModuleReplacementPlugin(),开启Hot Module Replacemen,即可实现热更新。

生成html配置

约定同一页面的js文件与模板文件命名一致,最终根据该js生成与其同名的html文件。

var htmlPages = (function() {
  var artDir = path.resolve(__dirname, 'src/views');
  var artFiles = glob.sync(artDir + '/*.art');
  var array = [];
  artFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    array.push(new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/template/index.html'),
      filename: filename + '.html',
      chunks: ['vendor', 'main', filename],
      chunksSortMode: function(chunk1, chunk2) {
        var order = ['vendor', 'main', filename];
        var order1 = order.indexOf(chunk1.names[0]);
        var order2 = order.indexOf(chunk2.names[0]);
        return order1 - order2;
      },
      minify: {
        removeComments: env === 'production' ? true : false,
        collapseWhitespace: env === 'production' ? true : false
      }
    }));
  });
  return array;
})();

通用模块提取为组件

对于一些在多个页面中都需要用到的模块,可将其提取出来作为通用的组件。组件的构成与页面一样,一个.js文件和一个.art文件以及一个.css文件,在js文件中渲染html内容,最后export,使用时直接require即可。具体实践可参考demo

存在问题

  1. 每新建一个页面就需要重新启动webpack服务
  2. 字体文件无法压缩,对于压缩通过font-face引入的网络字体,目前没有找到较好的解决方案

demo

基于本文理论的一个demo,地址:webpack-multipage-demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
运算符&&的三个不同层次
Apr 07 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 #Javascript
switchery按钮的使用方法
Dec 18 #Javascript
three.js实现3D影院的原理的代码分析
Dec 18 #Javascript
JS函数节流和函数防抖问题分析
Dec 18 #Javascript
vue 将页面公用的头部组件化的方法
Dec 18 #Javascript
浅谈使用React.setState需要注意的三点
Dec 18 #Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
小程序实现搜索框
2020/06/19 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python----数据预处理代码实例
2019/03/20 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
采购主管的岗位职责
2013/12/17 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
卫生系统先进事迹
2014/05/13 职场文书
小学语文业务学习材料
2014/06/02 职场文书
学习党章心得体会2016
2016/01/15 职场文书