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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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 session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python局部赋值的规则
2013/03/07 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python实现Floyd算法
2018/01/03 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
七一表彰活动方案
2014/01/18 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
司法局火灾防控方案
2014/06/05 职场文书
金融与证券专业求职信
2014/06/22 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
教师节获奖感言
2015/07/31 职场文书
小学远程教育工作总结
2015/08/13 职场文书
志愿者工作心得体会
2016/01/15 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
CSS基础详解
2021/10/16 HTML / CSS