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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JS中Attr的用法详解
2017/10/09 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers