webpack实战——一切皆模块
写在前面
这是webpack实战
系列笔记的第4篇记录,简单描述一个思想:模块化思想——一切皆模块
。本系列前几篇:
•打包第一个应用•模块化与模块打包•资源输入与输出
一切皆模块
一个web工程通常会包含一系列的静态资源,并且这些资源一般会存在某种相互依赖的关系。一般静态资源包含:
•HTML/CSS/JS•图片/音视频x•字体•模板•。。。
而其中可能存在的联系也容易举例,比如JS之间相互导出引入、HTML中会引入CSS、JS,而CSS和JS中又可能会引入图片、音视频等媒体资源。
但是对于webpack来说,这些静态资源却都是模块,我们可以像加载一个JS模块一样去加载它们,如:
// main.js
import '@/reset.css'
如果经常使用vuereact等单页面框架去构建项目的一定会非常熟悉这种写法,但如果没接触过的也一定会感觉这种写法比较新奇,甚至迷惑不解:从JS中加载CSS的意义何在呢?
其实从显示结果来看各种方法所呈现的页面都一样,但是实际上,上述语句却将
reset.css
打包生成在了输出资源目录下,并且描述了JS与CSS文件之间的依赖关系。
举例
举个场景:某页面模块需要用到按钮,于是我们加载它:
// src/page/index.js'
imort Button from './ui/button/button.js'
但是加载了JS文件之后发现需要各类样式,因此仍需要引入按钮组件的样式文件:
// src/page/style.scss 以SCSS为例
@import './ui/button/style.scss'
当然,在webpack中实际构建时,可以采用更加简洁的写法来处理:
// src/page/index.js
import Button from './ui/button/index.js'
import './style.scss' // 引用页面自身样式
// ./ui/button/index.js
import './style.scss' // 引用组件自身样式
从上例子可以看到,在button的JS中加载了组件自身的样式,但对于需要该组件的页面来说,只需要引入button的js模块即可,不需要再这里引入button的样式了。
可以画出依赖图便于理解:
•先看一般情况下的流程:
一般情况
•接下来看使用webpack:
webpack
可以看到,在一般情况下,JS和Style样式是分开处理的,我们需要分别维护组件JS和SCSS,每当我们增删一个或多个组件的时候,都需要多次操作操作:引入 JS&SCSS 或者删除 JS&SCSS。但在使用 webpack 的情况下,可以看到,button 模块被作为一个整体被引入进来,这样不仅可以直观且请清晰的看到依赖关系(JS和SCSS被作为一个整体引入到page/index.js),而且在进行组件的引入与删除时,直接操作一次即可达成目的。
在项目具有一定规模的情况下,可以更加清晰明了的总结出webpack对我们项目工程优化之处:
1.工程结构更简洁2.让依赖关系更直观3.代码可维护性更强
小结
在前面我们也说过模块化的一些特性:高内聚性和可复用性,而本篇旨在描述出一切皆模块的思想,在学习webpack过程中,可以将这一思想尽情发挥到每一种静态资源上,从而使得项目系统更加简洁且健壮!下一篇继续发挥一切皆模块思想——预处理器(loader)。
- cf--------(div1)1A. Theatre Square
- 离线网页制作器(beta1.0)
- uva---(11549)CALCULATOR CONUNDRUM
- CF---(452)A. Eevee
- MySQL排序内部原理探秘
- Uva----------(11078)Open Credit System
- 学习HTML5之塔克大战(详细记录)
- 学习HTML5之新特性标签一览(详细)
- poj----(1251)Jungle Roads(最小生成树)
- poj-------(2240)Arbitrage(最短路)
- MySQL在线DDL修改表结构的简单经验分享
- HDUOJ-----(1162)Eddy's picture(最小生成树)
- hduoj----1142A Walk Through the Forest(记忆化搜索+最短路)
- java设计之简单的JAVA计算器
- 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 数组属性和方法
- 海康相机SDK联合c++标定
- 开发一个Node命令行小玩具全过程--高颜统计工具
- 消息未读之点不完的小红点(Node+Websocket)
- pkg版本规范管理自动化最佳实践
- 数据库驱动问题:MySQLNonTransientConnectionException
- 喜大普奔,es2019登场
- [译] Object.assign 和 Object Spread 之争, 用谁?
- 急速 debug 实战二(浏览器 - 调试线上篇)
- via the 'serverTimezone' configuration property
- 急速 debug 实战一(浏览器-基础篇)
- MongoDB系列一: Replica Set 集群搭建实战
- 函数式编程看React Hooks(一)简单React Hooks实现
- 函数式编程看React Hooks(二)事件绑定副作用深度剖析
- Vue 开发必须知道的 36 个技巧【近1W字】
- 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》