webpack学习笔记(一)
1:什么是模块化开发?
模块化是指解决一个复杂问题时,自订向下逐层把系统划分为若干模块的过程,有多种属性,分别反映其内部特性;前端模块化一般指的是最优的代码组合,也可能是为了解决某些问题,包括很多特定模块组成的大模块。如果没有模块化,可能大家编写代码时最常见最多的就是复制。
当我们需要某个功能的代码时,可以查看一下,自己在那个以前的项目中写过,有些过,我们就会copy过来,copy多了,自然代码的可维护性就会下降。
模块化之后的代码,我们考虑更多的是:代码使用和维护成本的问题。所以有了很多模块化的规范:CommonJS、AMD和ES6 Module规范
CommonJS:是 Nodejs 广泛使用的一套模块化规范,是一种同步加载模块依赖的方式;
- · require:引入一个模块
- · exports:导出模块内容
- · module:模块本身
- 除了 JavaScript 的模块化,在 CSS 样式中也可以采用@import的方式来引入自己依赖的模块:
- @import 'reset.css';
- AMD:是 JS 模块加载库RequireJS提出并且完善的一套模块化规范,AMD 是一种异步加载模块依赖的方式;
- id:模块的 id
- dependencies:模块依赖
- factory:模块的工厂函数,即模块的初始化操作函数
- require:引入模块
- ES6 Module:ES6 推出的一套模块化规范。
- import:引入模块依赖
- export:模块导出
在一些 Less 或者 Sass 这些 CSS 预处理语言中@import
还可以用来导入一些变量、函数和mixin
的定义。
Tips:大家可能也经常听到组件化这个名词,模块化一般指的是,可以被抽象封装的最小/最优代码集合,模块化解决的是功能耦合问题;组件化则更像是模块化进一步封装,根据业务特点或者不同的场景封装出具有一定功能特性的独立整体;另外,前端提到组件化更多的是具有模板、样式和 JS 交互的 UI 组件。
1.1 webpack与Grunt/Gulp这类打包工具有什么不同?
webpack可以做到按需加载,像Grunt,Gulp这类构建工具,打包的思路是:遍历源文件〉匹配规则〉打包,这个过程中做不到按需加载,即对于打包起来的资源,到底页面用不用,打包过程是不关心的;
Webpack跟其他构造工具本质上不同之处在于:Webpack是从入口文件开始,经过模块依赖加载/分析和打包三个流程完成项目的构造。在加载/分析和打包的三个过程中,可以针对一些解决方案,达到按需加载的目的,比如code split
1.2 与webpack类似的工具还有那些?谈谈你为什么选择(或放弃)使用webpack?
自由发挥
2:为什么是webpack?
按需加载
当然,Webpack 还可以轻松的解决传统构建工具解决的问题:
- · 模块化打包,一切皆模块,JS 是模块,CSS 等也是模块;
- · 语法糖转换:比如 ES6 转 ES5、TypeScript;
- · 预处理器编译:比如 Less、Sass 等;
- · 项目优化:比如压缩、CDN;
- · 解决方案封装:通过强大的 Loader 和插件机制,可以完成解决方案的封装,比如 PWA;
- · 流程对接:比如测试流程、语法检测等。
3: webpack的配置有哪些,分别可以帮我们解决什么问题?
因为 Webpack 实际是用 Node.js 写的,所以首先要进行Node.js 的安装
NPM 的常用命令
下面介绍下 NPM 的常用命令:安装、删除、初始化、配置。
安装某个 NPM 包,使用命令npm install packageName,简写npm i packageName,如果执行命令的目录下有package.json则可以直接用npm install安装package.json中的所有依赖。如果我们要安装某个版本的包,则可以使用命令npm i packageName@x.x.x格式。
如果我们安装依赖包并且将这个依赖写入package.json则可以使用命令npm i packageName --save(简写npm i packageName -S),如果希望写到package.json开发依赖中(devdependencies)则使用命令npm i packageName --save-dev(简写npm i packageName -D)
删除某个 NPM 包,则使用npm uninstall 包名。
本地模式和全局模式
npm 的包安装,分为本地模式和全局模式,默认是本地模式,即在执行npm install
命令的当前目录创建node_modules
,然后下载安装包及其依赖到node_modules
目录。全局模式是指安装到全局路径的方式。在 Node.js 的 require 依赖之时,会优先查找自己当前文件的node_modules
,如果没有,则循环遍历上层的node_modules
,如果便历到根目录还找不到,则会使用全局模式安装的模块,另外全局模式安装的包可以指定全局命令,只需要在package.json
增加bin
字段并且指向包内对应的文件即可。全局安装一个包,使用命令npm install --global
,--global
可以简写为-g
。
初始化一个 NPM 项目
npm init 用来初始化生成一个新的 package.json 文件。输入npm init
并且根据对应的提示回答问题,会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
如果使用了 -f
(代表force
)、-y
(代表yes
),则跳过提问阶段,直接生成一个新的 package.json
文件。
设置 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
NPM 其他常用命令
npm set:设置环境变量,例如:npm set init-author-name 'Your name'
,初始化的时候会使用默认环境变量;
npm info:查看某个包的信息,例如:npm info lodash
;
npm search:查找 npm 仓库,后面可以跟字符串或者正则表达式,例如:npm
search webpack
;
npm list:树形的展现当前项目安装的所有模块,以及对应的依赖,例如:npm list --global
查看全局安装的模块。
- 什么是 NPM Scripts?NPM Scripts 可以用来做什么?
Npm 不仅可以用于模块管理,还可以用于执行脚本,package.json文件中可以添加script字段,用于指定脚本命令,供npm直接调用
例如:
{
"scripts": {
"build": "webpack",
"start": "node src/scripts/dev.js"
}
}
在package.json添加上面字段之后,可以直接使用npm run build和npm run start命令了,实际上:
- · npm run build:相当于执行了当前项目中目录下的webpack命令;
- · npm run start:相当于执行了node src/scripts/dev.js。
另外npm run start还可以简写成npm start。
Tips:除了 npm 外,还有一些包管理工具,主要是针对 npm 的下载速度慢、node_modules
混乱等缺点设计的,例如yarn和 pnpm。