js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 利利⽤用 glob.sync module.exports = { entry: { index: './src/index/index 脚本懒加载，使得初始下载的代码更更⼩小 懒加载 JS 脚本的⽅方式 CommonJS：require.ensure ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） 如何使⽤用动态 import? 安装 babel 插件 ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） npm install @babel/plugin-syntax-dynamic-import ·⽅方案⼆二：将 style-loader 替换成 isomorphic-style-loader 如何解决样式不不显示的问题？ 使⽤用打包出来的浏览器器端 html 为模板 设置占位符，动态插⼊入组件 ⾸首屏数据如何处理理？ 服务端获取数据 替换占位符 当前构建时的⽇日志显示 展示⼀一⼤大堆⽇日志，很多并不不需要开发者关注 统计信息 stats 如何优化命令⾏行行的构建⽇日志

webpack-plugin 构建体积优化：动态 Polyfill babel-polyfill 打包后体积：88.49k，占比 29.6% Promise 的浏览器支持情况 构建体积优化：动态 Polyfill Polyfill Service原理 识别 User Agent，下发不同的 Polyfill 构建体积优化：如何使用动态 Polyfill service polyfill ll.min.js?unknown=polyfill&features=Promise,Map,Set 体积优化策略总结 Scope Hoisting Tree-shaking 图片压缩 动态 Polyfill 公共资源分离

//返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) 先将 entry 中对应的 module 都生成一个新的 chunk 2. 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中 3. 如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成

ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote