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 深拷贝函数
Dec 04 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
javascript 快速排序函数代码
May 30 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
JS实现分页导航效果
Feb 19 Javascript
小程序实现上传视频功能
Aug 18 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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
php intval函数用法总结
2019/04/14 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
javascript 写类方式之十
2009/07/05 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
民生工作实施方案
2014/05/31 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年学生工作总结
2014/11/20 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP