title: webpack principle
date: 2020-06-18 20:29:17
tags: webpack
categories:

  • WEBPACK
  • principle

一、基础

查找 node_modules/webpack/.bin 的 webpack.sh 或 webpack.cmd 文件

在 MAC 下可尝试如下脚本，进一步了解命令行

1、新建脚本文件 shellA.sh

1
2
3
4
5
6
7
# dirname $0，取得当前执行的脚本文件的父目录
basepath=$(cd `dirname $0`; pwd)
echo "取得当前执行的脚本文件的父目录:$basepath"

# 打印当前路径
currentPath=$(pwd)
echo "当前文件夹路径: $currentPath"

2、设置脚本权限 chmod o+w shellA.sh

3、source 读取脚本并执行 soucre shellA.sh

在 node 开发中，对外开放的命令行，要在 package.json 的 bin 字段指定node 脚本工具开发

webpack 源码

  • 从webpack 的 package.son 中可知，webpack 命令执行，直接调用了 bin 目录下的脚本
1
2
3
"bin": {
  "webpack": "bin/webpack.js"
},
  • bin/webpack.js 的逻辑主要判读了 webpack-cli 和 webpack-command，只要存在其一，去执行对应的脚本

webpack-cli

作用：

1、引入 yargs 对命令行定制

2、分析参数，生成配置项

3、引入 webpack 根据配置项进行编译和构建

webpack-cli 代码逻辑

  • 识别 NON_COMPILATION_ARGS 里不要编译的命令

  • 利用 yargs 生成 helper 信息也就是常用 xx -help 展示所有命令

  • 利用 yargs 分八组参数，也就是命令 node_modules/.bin/webpack -help 展示的

参数 作用
Config 配置相关参数，文件名，运行环境等
Basic entry设置，debug，watch，devtool等设置
Module loader 设置拓展
Output 输出路径，文件名等
Advanced 记录设置，缓存，监听等
Resolving 别名，解析文件后缀
Optimizing 优化参数
Stats 统计，打印参数
options 通用参数，版本信息，帮助命令

webpack-cli 又回到了 webpack ，执行其 Compiler 方法

1、webpack 的 Compiler 继承 Tapable，另一个核心对象 Compilation 同样继承自 Tapable

1
2
class Compiler extends Tapable {}
class Compilation extends Tapable {}

2、 Tapable 类似于 node 的 eventEmitter 的发布订阅模块，基于事件流的编程规范，控制钩子函数的发布订阅

构建流程

1.初始化参数: 从配置文件和 shell 语句中读取与合并参数, 得出最终的参数
2.开始编译: 用上一步得到的参数初始化 Compiler 对象, 加载所有配置的插件, 通过执行对象的 run 方法开始编译
3.确定入口: 根据配置中的 entry 找出所有入口文件
4.编译模块: 从入口文件出发, 调用所有配置的 Loader 对模块进行翻译, 再找出该模块依赖的模块, 再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5.完成模块编译: 再经过第四步使用 Loader 翻译完所有模块后, 得到了每个模块被翻译后的最终内容以及他们之间的依赖关系
6.输出资源: 根据入口和模块之间的依赖关系, 组装成一个个包含多个模块的 chunk, 再将每个 Chunk 转换成一个单独的文件加入到输出列表中, 这是可以修改输出内容的最后机会
7.输出完成: 在确定好输出内容后, 根据配置确定输出的路径和文件名, 将文件的内容写入文件的系统中

分三大阶段

  • 初始化参数

  • 编译阶段

  • 输出阶段

  • webpack4里面将webpack 和 webpack-cli分离，使用时需要两个都安装一下。

最简单的配置

1
2
3
4
5
6
7
8
9
10
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

tips：

  1. webpack 默认加载webpack.config.js文件，可通过 webpack --config ./zz.js指定你想用的文件名。

加载器

加载器 功能
babel-loader 转换es6，7的新特性
css-loader 支持css文件等加载和解析
less-loader 将less转换成css
ts-loader 将ts转换成js
file-loader 进行图片，字体等打包
raw-loader 将文件以字符串形式导入
thread-loader 多进程打包js和css

插件

插件 功能
CommonsChunkPlugin 将chunks相同模块代码提取成公共js
CleanWebpackPlugin 清理构建目录
ExtractTextWebpackPlugin 将css从bunlde文件里提取成独立css文件
CopyWebpackPlugin 将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin 创建html文件去承载输出的bundle
UglifyjsWebpackPlugin 压缩js
ZipWebpackPlugin 将打包出的资源生成zip包
返回
顶部