查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不 存在，就抛出错误。 实际的入口文件是：node_modules\webpack\bin\webpack.js 分析 webpack 的入口文件：webpack.js process.exitCode = 0; (webpack-command) 这个 npm 包，并且 执行 CLI webpack-cli 做的事情 引入 yargs，对命令行进行定制 分析命令行参数，对各个参数进行转换，组成编译配置项 引用webpack，根据配置项进行编译和构建 从NON_COMPILATION_CMD分析出不需要编译的命令 const { NON_COMPILATION_ARGS } = require("./utils/constants"); webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) ·Basic options: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置) ·Module options: 模块参数，给 loader 设置扩展 ·Output options:

stats 初级分析：使用 webpack 内置的 stats Node.js 中使用 颗粒度太粗, 看不出问题所在 速度分析：使用 speed-measure-webpack-plugin 可以看到每个 loader 和插件执行耗时 代码示例 速度分析插件作用 分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf） 默认使用更快的 配置 合理使用 alias 图片压缩 使用：配置 image-webpack-loader 要求：基于 Node 库的 imagemin 或者 tinypng API Imagemin的优点分析 可以引入更多第三方优化插件，例如pngquant 有很多定制选项 可以处理多种图片格式 Imagemin的压缩原理 pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG

运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 ⼤大量量作⽤用域包裹代码，导致体积增⼤大（模块越多越明显） 模块转换分析 结论： ·被 webpack 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 模块 模块初始化函数 进⼀一步分析 webpack 的模块机制 分析： · 打包出来的是⼀一个 IIFE (匿匿名闭包) · modules 是⼀一个数组，每⼀一项是⼀一个模块初始化函数

"webpack --watch" }, "keywords": [], "author": "", "license": "ISC" } 唯⼀一缺陷：每次需要⼿手动刷新浏览器器 ⽂文件监听的原理理分析 轮询判断⽂文件的最后编辑时间是否变化 某个⽂文件发⽣生了了变化，并不不会⽴立刻告诉监听者，⽽而是先缓存起来，等 aggregateTimeout module.export = { //默认 log('Example app listening on port 3000!\n'); }); WDM 将 webpack 输出的⽂文件传输给服务器器 适⽤用于灵活的定制场景 热更更新的原理理分析 Webpack Compile: 将 JS 编译成 Bundle HMR Server: 将热更更新的⽂文件输出给 HMR Rumtime Bundle server: 提供⽂文件在浏览器器的访问

compilation.assets[name] = new RawSource("demo"); cb(); }); } }; 插件扩展：编写插件的插件 插件自身也可以通过暴露 hooks 的方式进行自身扩展，以 html- webpack-plugin 为例： ·html-webpack-plugin-alter-chunks (Sync) ·html-webp

GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config.js

/@modules 的标识符。 如：import React from "/@modules/@pika/react/source.development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from ’/src/a/index.js’ 给非 js 类型（js 类型：如 js(x)/ts(x)/vue）的文件地址加上 一个叫

distExt) 参数 参数 说明 说明 event gulp.watch 回调函数的 event search 需要被替换的起始字符串 replace 第三个参数是新的的字符串 distExt 扩展名(非必填) 此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到 src/js/log.js 文件修改后只重新编 译 log.js 。 [21:47:25] changed