changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node.js 版本从 6 增加到 10.13.0 最⼩ Node.js 版本：10.13.0 功能清除：清理弃⽤的能⼒ 所有在 webpack 4 里面被废弃的能力都被清除，因此需要确保 webpack4 没有打印警告。 require 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill 功能清除：不再为 Node.js 模块引⼊ polyfill node-libs-browser：https://github

Getting started with gulp 2 Remarks 2 Versions 2 Examples 2 Installation or Setup 2 1. Install Node.js and NPM: 2 2. Install gulp globally: 2 3. Initialize your project directory: 3 4. Install gulp 3.9.1 2016-02-09 4.0.0 2016-06-21 Examples Installation or Setup 1. Install Node.js and NPM: Gulp requires Node.js and NPM, Node's package manager. Most installers include NPM with Node.js. Refer Gulp Path Examples Creating Simple Gulp Path to the app Before running gulp you need to install Node.JS and npm The head of the Gulp.js is: var gulp = require('gulp'); clean = require('gulp-clean');

为什什么选择 webpack? webpack grunt gulp 定义 Module bundler Task runner Task runner 语⾔言 JavaScript Node.js Node.js 发布时间 2012.3 2012.6 2013.7 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 /src/index.html’ }) ] }; 指定默认的 entry 为： ./src/index.js 指定默认的 output 为： ./dist/main.js 环境搭建：安装 Node.js 和 NPM ·通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash ·通过 wget 安装：wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash 安装 Node.js 和 NPM ·nvm install v10.15.3 ·检查是否安装成功：node -v, npm -v 环境搭建：安装 webpack 和 webpack-cli 安装 webpack

AND EMBEDS MAPPINGS INTO A CONTEXT MODULE 2012: CONTINUED DEVELOPMENT • ADDED POLYFILLS FOR SOME NODE.JS MODULES • MORE WILL BE ADDED LATER • ADDED LOADERS • style-loader • css-loader • … 2012: FIRST NOW JUL 2012: ISSUES? • @jhnns OPENED ISSUES #3 - #16 2012: CONTINUED DEVELOPMENT • ALIGN WITH NODE.JS COMMONJS • ADDED AMD SUPPORT • IMPORTANT FEATURE FOR REQUIRE.JS MIGRATION • webpack-dev-middleware/server ENHANCED-REQUIRE • THERE ALSO WAS A MODULE NAMED “enhanced-require” • EMULATED WEBPACK FEATURES FOR NODE.JS • require.ensure • LOADERS • IT WAS LATER ABANDONED IN FAVOR OF COMPILING BEFORE RUNNING • target:

React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题 浏览器器的全局变量量 (Node.js 中没有 document, window) 样式问题 (Node.js ⽆无法解析 css) ·组件适配：将不不兼容的组件根据打包环境进⾏行行适配 ·请求适配：将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 获取错误码 在 CI/CD 的 pipline 或者发布系统需要知道当前构建状态 构建异常和中断处理理 webpack4 之前的版本构建失败不不会抛出错误码 (error code) Node.js 中的 process.exit 规范 · 0 表示成功完成，回调函数中，err 为 null · ⾮非 0 表示执⾏行行失败，回调函数中，err 不不为 null，err.code 就是传给

NEEDED BY APPLICATION WATCHING SEES MORE BUILD-AFFECTING CHANGES NO LONGER FOCUS ON NODE.JS COMPATIBILITY NO NODE.JS BUILT-IN MODULE POLYFILLS NEW SPECS JSON MODULES (EXPERIMENT) NEW WEBASSEMBLY MODULES

facade • Validates configuration according to schema • Applies the node.js environment plugins • Input/Output/Watch FileSystem for node.js • Calls WebpackOptionsApply to process configuration • Creates

chunk loading for Code Splitting target: "electron-main" target: "electron-renderer" node.js target • Bundle node.js applications • Use cases: Faster startup, loaders, custom resolving, all webpack features

开发商城项目 08 基础篇：webpack 进阶用法 03 stats: 构建的统计信息 package.json 中使用 stats 初级分析：使用 webpack 内置的 stats Node.js 中使用 颗粒度太粗, 看不出问题所在 速度分析：使用 speed-measure-webpack-plugin 可以看到每个 loader 和插件执行耗时 代码示例 速度分析插件作用 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf）

MODULE GRAPH → SEPARATE CLASS • SYNCHRONOUS ASYNC • MORE EXPENSIVE → IDLE • → close • MINIMUM NODE.JS • • Set • Map • PURE-JS WATCHING • QUEUES • PLUGINS • • https://github.com/sokra/slides