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 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
JavaScript高级程序设计
2006/12/29 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python之消除前缀重命名的方法
2018/10/21 Python
浅析python参数的知识点
2018/12/10 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
高中运动会入场词
2014/02/14 职场文书
售房协议书
2014/08/19 职场文书
推普周活动总结
2014/08/28 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书