查找是否存在 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 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) ·Basic 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: 提供⽂文件在浏览器器的访问

task('default', function () { gulp.watch('src/js/**/*.js', ['uglifyjs']) }) src/js/**/*.js 是 glob 语法。百度百科：glob模式 、node-glob 在命令行输入 gulp 后会出现如下消息，表示已经启动。 [20:39:50] Using gulpfile ~/Documents/code/gulp