前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 JavaScript 文件 gulp.task('script', function() { // 1. 找到 gulp.src('js/*.js') // 2. 压缩 .pipe(uglify()) // 3. 另存 .pipe(gulp.dest('dist/js')); }); 代码执行结果 代码执行后文件结构 └── js/ demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi"); 此时 dist/js 目录下的 .js 文件都是压缩后的版本。 你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3.

app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output Output ⽤用来告诉 webpack 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output: { filename: path: __dirname + '/dist' } }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders txt$/, use: 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module

什么？ 查找 webpack 入口文件 在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录 查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不 存在，就抛出错误。 实际的入口文件是：node_modules\webpack\bin\webpack.js 分析 webpack 的入口文件：webpack.js process //创建一份 webpack 配置文件 "migrate", //进行 webpack //往 webpack 配置文件中增加属 性 "remove", //往 webpack 配置文件中删除属 性 "serve",

资源加载的差异 - bundle 资源加载的差异 - bundless bundless 的冷启动时间大大缩短 bundless 的 HMR 速度不受整个项目体积影响 bundless 的单文件粒度的缓存更优 打包速度的对⽐ bundle 依赖 sourcemap bundless 调试简单 以 webpack 里面的 sourcemap 类型举例 开发体验的对⽐ ⽬ 录 CONTENTS ps://github.com/evanw/esbuild 创建 KOA Server 使用 chokidar 监听文件变化 模块解析 增加各种中间件 启动服务 文件路径：src/node/server/index.ts Vite 打包流程 - 创建构建服务 文件路径：src/node/server/index.ts Vite 会利用 serveStaticPlugin 将整个项目根目录 devServer 具备静态文件服务功能 Vite 打包流程 – 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from 'react'; 浏览器（只有相对路径和绝对路径）无法识别，因 此需要重写模块路径 Vite 打包流程 – 重写模块路径 文件路径：src/node/s

分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用 使用 DLLPlugin 进行分包 使用 DllReferencePlugin cache-loader 或者 hard-source-webpack-plugin 缩小构建目标 比如 babel-loader 不解析 node_modules 目的：尽可能的少构建模块 减少文件搜索范围 优化 resolve.mainFields 配置 优化 resolve.modules 配置（减少模块搜索层级） 优化 resolve.extensions 配置 合理使用 alias

ack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 题。 冒烟测试执行 ·是否有 JS、CSS 等静态资源文件 每次构建完成 build 目录是否有内容输出 ·是否有 HTML 文件 构建是否成功 判断构建是否成功 在示例项目里面运行构建，看看是否有报错 判断基本功能是否正常 ·是否有 JS、CSS 等静态资源文件 编写 mocha 测试用例 ·是否有 HTML 文件 单元测试与测试覆盖率 单纯的测试框架，需要断言库 集成框架，开箱即用 () => { expect(add(1, 2).to.equal(3)); }); }); 单元测试接入 2. 新建 test 目录，并增加 xxx.test.js 测试文件 1. 安装 mocha + chai 3. 在 package.json 中的 scripts 字段增加 test 命令 "scripts": { "test": "node_m

cacheable(false) 关掉缓存 缓存条件： loader 的结果在相同的输入下有确定的输出 ·有依赖的 loader 无法使用缓存 loader 如何进行文件输出？ 通过 this.emitFile 进行文件写入 const loaderUtils = require("loader-utils"); module.exports = function(content) { 的方式抛出 throw new Error(“ Error Message”) 通过 Compilation 进行文件写入 Compilation 上的 assets 可以用于文件写入 ·可以将 zip 资源包设置到 compilation.assets 对象上 文件写入需要使用 webpack-sources (https://www.npmjs.com/package/webpack- ·html-webpack-plugin-after-emit (Async) 编写一个压缩构建资源为zip包的插件 要求： ·生成的 zip 包文件名称可以通过插件传入 ·需要使用 compiler 对象上的特地 hooks 进行资源的生成 准备知识：Node.js 里面将文件压缩为 zip 包 使用 jszip (https://www.npmjs.com/package/jszip) var zip

开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 output ⽂文件越来越多 通过 npm scripts 清理理构建⽬目录 rm -rf ./dist && webpack rimraf ./dist && webpack ⾃自动清理理构建⽬目录 module cript_source_map.html source map 关键字 source map: 产⽣生.map⽂文件 eval: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom /(react|react-dom)/, name: 'vendors', chunks: 'all' } } } } }; 利利⽤用 SplitChunksPlugin 分离⻚页⾯面公共⽂文件 minChunks: 设置最⼩小引⽤用次数为2次 module.exports = { optimization: { splitChunks: { minSize: 0, cacheGroups:

816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config.js 初识 webpack：webpack 配置组成 module.exports = { entry: './src/index 'raw-loader' } ] }, plugins: [ new HtmlwebpackPlugin({ template: './src/index.html’ }) ] }; 打包的⼊入⼝口⽂文件 打包的输出 环境 Loader 配置 插件配置 ·································· ·································