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 无刷新分页实例代码
Nov 12 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
JS提交form表单实例分析
Dec 10 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
vue无限轮播插件代码实例
May 10 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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 函数学习简单小结
2010/07/08 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
大学生毕业自我鉴定范文
2013/11/03 职场文书
自荐书封面下载
2013/11/29 职场文书
安全大检查反思材料
2014/01/31 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
热爱劳动主题班会
2015/08/14 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
数据库之SQL技巧整理案例
2021/07/07 SQL Server
python中数组和列表的简单实例
2022/03/25 Python
golang语言指针操作
2022/04/14 Golang