分类: javascript webpack

webpack笔记02


作者:朱培鑫

时间:2018-05-03

模块化

JS 模块化

命名空间
COMMONJS
AMD/CMD/UMD
ES6 module

命名空间
库名.类型名.方法名

CommonJS
Modules/1.1.1版本
一个文件为一个模块
通过module.exports暴露模块接口
通过require引入模块
同步执行

AMD
Async Module Definition
使用 define 定义模块
使用 require 加载模块
代表 RequireJS
依赖前置,提前执行

CMD
Common Module Definition
一个文件为一个模块
使用 define 定义模块
使用 require 加载模块
代表 SeaJS
尽可能懒执行

UMD
Universal Module Definition
通用解决方案
三步骤

判断是否支持AMD
判断是否支持CommonJS
都没有,使用全局变量

ESM
ECMAScript Module
一个文件为一个模块
export/import

webpack支持
AMD(requireJS)
ES Modules(推荐)
CommonJS

CSS 模块化

CSS设计模式

OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM

CSS Modules

核心概念

entry
output
loaders
plugins

常用loader

编译相关
babel-loader、ts-loader
样式相关
style-loader、css-loader、less-loader、postcss-loader
文件相关
file-loader、url-loader

常用plugins

优化相关
CommonsChunkPlugin
UglifyjsWebpackPlugin
功能相关
ExtractTextWebpackPlugin
HtmlWebpackPlugin
HotModuleReplacementPlugin
CopyWebpackPlugin

相关名词
Chunk -> 代码块
Bundle -> 打包后绑在一起的代码
Module -> 模块

( 本篇完 )