webpack多页面开发实践
写在前面
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
存在问题
- 每新建一个页面就需要重新启动webpack服务
- 字体文件无法压缩,对于压缩通过font-face引入的网络字体,目前没有找到较好的解决方案
demo
基于本文理论的一个demo,地址:webpack-multipage-demo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 路径寻优
- Milvus 实战 | 基于 Milvus 的 CORD-19 论文检索引擎
- Laravel 8 新特性和功能优化速览
- Linux 搭建 我的世界(MC) 基岩版服务器
- 虚函数、析构函数、静态函数、多态
- 一日一技:pylint除了检查代码风格,还能做这件事情
- Manjaoro ifconfig问题
- 面对成百上千台服务器产生的日志,试试这款轻量级日志搬运神器!
- 内网渗透 | 内网中的信息收集
- 通过命令下载执行恶意代码的几种姿势
- CS如何配置通过CDN上线
- Height transition
- 【DB笔试面试861】在Oracle中,有哪些常见组件?
- 【DB笔试面试862】在Oracle中,如何安装DBMS_NETWORK_ACL_ADMIN包?
- 【DB宝19】在Docker中使用MySQL高可用之MHA