1. 首页
  2. webpack

webpack 4 源码主流程分析(一):前言及总流程概览

原文首发于 blog.flqin.com。如有错误,请联系笔者。分析码字不易,转载请表明出处,谢谢!

前言

此系列文章作为笔记,用于记录分析 webpack 源码主流程的过程。

概览

目录

根据 webpack 构建流程及相关,本系列文章一共分为以下章节:

  1. 配置初始化
  2. 编译前的准备
  3. reslove 前的准备
  4. reslove 流程
  5. 构建 module(上)
  6. 构建 module(下)
  7. 生成 chunk
  8. 优化 chunk
  9. 资源的构建
  10. 文件的生成
  11. 打包后文件解析
  12. watch
  13. webpack 优化

流程图

webpack 构建流程图:

webpack 构建流程

本系列代码环境


"devDependencies": { "@babel/core": "^7.7.5", "@babel/preset-env": "^7.7.6", "@fe_korey/test-loader": "^1.0.0", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0" }, "dependencies": { "webpack": "^4.41.2", "webpack-cli": "^3.3.10" } 复制代码

版本不同,源码略微有差异。

本项目 demo 开源在github,欢迎交流学习。

分析源码前的一系列准备工作

采用 vscode 来打断点调试分析。

配置 vscode


//launch.json "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "runtimeExecutable": "npm", "runtimeArgs": ["run", "debug"], "port": 5858, "console": "externalTerminal", "skipFiles": ["<node_internals>/**/*.js"] } ] 复制代码

这些配置是怎么来的?

配置 npm script


"scripts": { "debug": "node --inspect-brk=5858 ./node_modules/.bin/webpack" }, 复制代码

了解 webpack 的插件架构

webpack 从配置初始化到打包完成定义了一个生命周期,在这个生命周期中的每一个阶段定义一些不同的功能。webpack 的流程同样也是一个事件驱动的架构,利用插件系统 tabpable,通过 发布订阅事件 来实现所有内部的,外部扩展的功能。

了解 webpack 的核心模块

webpack 的构建是通过 Compiler 控制构建流程,Compilation 解析,ModuleFactory 生成模块,Parser 解析源码,Template 渲染代码,最后输出打包后的文件。

了解 tapable

tabpable 本质就是一个事件发布订阅机制,支持同步异步,使用xxx.tap之类的来事件订阅,使用xxx.call之类的来进行事件发布。 相关文档查阅:

demo 准备

npm 安装


npm i webpack-cli webpack npm i @babel/core @babel/preset-env babel-loader -D npm i @fe_korey/test-loader -D 复制代码

demo 文件

我们以 development 模式为例,暂时忽略支线剧情,只分析探索 webpack 的打包主流程。


//src/a.js import { add } from 'Src/b'; import('./c.js').then(m => m.sub(2, 1)); const a = 1; add(3, 2 + a); 复制代码

//src/b.js import { mul } from '@fe_korey/test-loader?number=20!Src/e'; export function add(a, b) { return a + b + mul(10, 5); } export function addddd(a, b) { return a + b * b; } 复制代码

//src/c.js import { mul } from 'Src/d'; import('./b.js').then(m => m.add(200, 100)); export function sub(a, b) { return a - b + mul(100, 50); } 复制代码

//src/d.js export function mul(a, b) { const d = 10000; return a * b + d; } 复制代码

//webpack.config.js var path = require('path'); module.exports = { entry: { bundle: './src/a.js' }, devtool: 'none', output: { path: __dirname + '/dist', filename: '[name].[chunkhash:4].js', chunkFilename: '[name].[chunkhash:8].js' }, mode: 'development', resolve: { alias: { Src: path.resolve(__dirname, 'src/') } }, module: { rules: [ { test: /\.js$/, use: [ { loader: 'babel-loader' } ] } ] } }; 复制代码

//babel.config.js module.exports = { presets: ['@babel/env'] }; 复制代码

一颗坚定且耐操的心

为什么要阅读它?

  • 因为可以让我们更好的理解海量配置,知道每一个配置在打包的具体哪个环节
  • 在对构建流程进行优化时能更清楚的根据过程思考优化点
  • 还可以学习下在这种大型项目里,如何实现稳定的架构和良好的扩展性
  • 对自定义开发一些 pluginloader 有更深刻的理解
  • 了解它的一些代码设计方式能给我们的日常搬砖带来一些新的启发

最重要的还是想满足自己的好奇欲,想知道在这犀利的打包背后,到底是怎么实现的。

webpack 里包含数不清的变量和钩子,海量插件,这些足以让你怀疑人生,请务必保持一颗耐操的心。 一切准备就绪后,进入 vscode 的调试模式!

作者:可鱼不是鱼
链接:https://juejin.im/post/5e1c92776fb9a02fe118628d

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:webpack 4 源码主流程分析(一):前言及总流程概览

链接:https://www.javascriptc.com/3937.html

« Firefox 74 发布:是时候和 TLS 1.0 – 1.1 协议说再见了
为什么要用Go语言?»
Flutter 中文教程资源

相关推荐

QR code