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 10 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
微信小程序中使用vant框架的具体步骤
Feb 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python 随机森林算法及其优化详解
2019/07/11 Python
深入了解Django中间件及其方法
2019/07/26 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
汽车促销活动方案
2014/03/31 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Mysql开启外网访问
2022/05/15 MySQL