webpack

构建过程

• 初始化；
  • 根据配置文件和 shell 语句读取参数；
  • 初始化 plugin 和 loader；
• 编译构建流程；
  • 从入口文件出发，串行执行 module，使用 loader 翻译 module；
  • 找到依赖该 module 的 module，递归进行编译构建；
  • 如果定义了若干 plugin，在对应生命周期拓展 Webpack 行为；
• 输出：对于比那以后的 module 进行合并处理，形成 chunk，输出到文件系统；

loader 和 plugin

loader

基础

• 对于模块进行转换，在加载模块时处理文件；
• 将非 js 文件转换为 js 文件；

配置方式

• 配置文件定义；
• 内联方式：import 显示指定；
• cli：shell 命令指定；

特性

• 链式调用；
• 在 loader 处理结果之后继续处理；

常见的 loader

• style-loader：css 添加到内联 style 中；
• css-loader：允许 css 通过 require 引入；
• less-loader；
• sass-loader；
• postcss-loader；
• url-loader；
• html-minify-loader；
• babel-loader；

plugin

基础

• 运行在 webpack 的生命周期的钩子之中；
• 拓展 webpack 的行为；

配置方式

• 配置文件定义；
• 内联方式：import 显示指定；
• cli：shell 命令指定；

常见的 plugin

• clean-webpack-plugin：自动清理构建目录；
• mini-css-extract-plugin：单独提取 css 至一个文件中；
• BabelMinifyWebpackPlugin：使用 babel-minify 进行压缩；
• CopyWebpackPlugin：将文件或目录复制到构建目录；
• DefinePlugin：编译时创建全局对象；

loader 和 plugin 的不同

• loader；
  • 文件夹加载器，对于文件进行处理，打包到指定文件中；
  • 运行在文件打包之前；
• plugin；
  • 拓展 webpack 功能，解决 loader 无法实现的行为；
  • 在 WebPack 整个生命周期运行；
    • WebPack 基于订阅者模式实现事件机制，plugin 通过监听事件，修改 WebPack 输出，拓展其行为；