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)。
- 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 数组属性和方法
- Python 技术篇-用PIL库实现彩色图片转化为黑白图片
- PLSQL-游标
- 超详细的Java容器、面板及四大布局管理器应用讲解!
- Go各时间字符串的解析
- MongoDB数据分页与排序
- Python 技术篇-用PIL库实现图片剪切、图片粘贴
- maven初步入门
- 超详细的Java弹窗样式及使用教程【JOptionPane类详细使用教程】
- Python 技术篇-用PIL库旋转图片的两种方式,改变图像尺寸
- html+css+JavaScript例题
- 加速Github的访问及下载速度
- HDFS简介
- Python 技术篇-获取requests里的二进制文本并保存为音频、图片文件
- [转]maven的pom.xml详解
- Windows下给磁盘扩容