html如何设置多个模块,在webpack中如何实现多页面开发
这篇文章主要介绍了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
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
html如何设置多个模块,在webpack中如何实现多页面开发相关推荐
- bitnami搭建php网站,设置并访问Bitnami LAMP堆栈中的PHP-FPM状态页面
这个问题有两个部分. 首先,您需要在PHP-FPM配置中启用状态页处理程序,然后您需要设置Apache以将给定的URL路由到该处理程序. 要设置PHP-FPM: cd /path/to/bitnami ...
- webpack中loader加载器(打包非js模块)
通过loader打包非js模块 我这儿用VScode为编辑器 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结 尾的模块,webpack 默认处理不了, ...
- 如何设置分布式IO模块Profinet的地址
Profinet设备需要根据IP地址和设备名称来识别. 1:首先在博途组态设备地址和设备名称,位于 设备组态->网络视图->选中Profinet从站->属性->PROFINET ...
- Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
简要介绍:在webpack的官网,给出了十几种sourcemap,那么每一种sourcemap之间有什么区别,本文在理解sourcemap的基础上,分析在生产和开发环境中,应该采用何种形式的sourc ...
- 设置指纹识别模块分析
设置指纹识别模块分析 一, 指纹项的加载 首先我们从指纹项的布局加载开始分析,从手机设置下边直观的可以发现,指纹项是放在二级菜单安全菜单里边的,下面我们就从代码里边分析一下,指纹项是如何被加载进来 ...
- 分布式医疗挂号系统(二) | 开发医院设置微服务模块
本系列文章介绍从0开始搭建一个基于分布式的医疗挂号系统.本次四篇文章完成了医院设置微服务模块的后端接口,为了方便开发,对接口的返回结果.全局异常.全局日志进行了统一处理. 同时,为了方便进行访问测试, ...
- webpack把源代码里面的console和debugger全部去掉_在webpack中,module、chunk和bundle到底是什么样的存在?...
What are module, chunk and bundle in webpack?(在webpack中,module.chunk和bundle到底是什么样的存在呢?)相信很多人在使用webpa ...
- webpack多个Html,少量修改webpack配置支持打包多页面
webpack一般是配合单页面应用使用,但并不是所有的web应用都是单页的,有多个页面的情况还是很多的,当然你可以用其它的构建工具来打包,但对于习惯了webpack的你来说,要是能直接在webpack ...
- 在webpack中使用eslint配置(详细教程)-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解,现在分享给大家,也给大家做个参考. webpack中eslint使用 首先,要使webpack支持eslint,就要要安装 eslint-lo ...
最新文章
- Linux 的相关介绍
- Linux下udp程序怎么运行,Linux下UDP的连接程序示例(阻塞、非阻塞)
- 蓝桥杯JAVA省赛2013-----B------4(黄金连分数)
- 关于vs2008上的socket链接错误问题
- 【图像处理】MATLAB:频域处理
- mysql中完成登陆注册_Flask+MySql实现用户登录注册
- 黑马程序员html基本笔记
- Matplotlib可视化数据分析图表下(常用图表的绘制、折线图、柱形图、直方图、饼形图、散点图、面积图、热力图、箱形图、3D图表、绘制多个图表、双y轴可视化图表、颜色渐变图)
- 单片机数码管显示程序c语言,基于STC89C52单片机的动态数码管显示C语言程序
- 《斗罗大陆H5》月刃武魂指导和魂环搭配
- 文心一言——何妨吟啸且徐行
- Maven Nexus详解
- 上帝的心态发生了改变---太原市-------从热血沸腾到麻木不仁
- Consistency = Consensus?
- 原生js遍历 json数组对象
- win32api模拟键盘鼠标
- linux系统usb驱动怎么安装教程,MX Linux的闪存驱动器安装教程-电脑系统安装手册...
- c语言中7%3是什么意思,为什么7%(-4)的结果是3?
- 匈牙利算法解决加权二分图问题
- 基于SSM框架的学籍管理系统
热门文章
- mysql 主从复制 双主从复制原理 防止主键重复问题(必看)
- Spring+ActiveMQ配置
- 以太坊经典逆势上涨,行情能否继续?
- 美国国会议员也是“BCH—HODLING”
- 比特币分叉第一案,谁动了我的比特币现金?
- 比特币现金支持者为网络的未来六个月做准备
- error: dereferencing pointer to incomplete type
- 每日 30 秒 ⏱ 无障碍世界
- xcode7 打开工程错误 This Document requires xcode8.0 or later.
- 用百度地图API分析打交通大数据