使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } } } }; · async 异步引⼊入的库进⾏行行分离(默认) · initial 同步引⼊入的库进⾏行行分离 · all 所有引⼊入的库进⾏行行分离(推荐) 利利⽤用 SplitChunksPlugin 分离基础包 test: 匹配出需要分离的包 module.exports shaking(摇树优化) 概念：1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 uglify 阶段被擦除掉。 使⽤用：webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: false 即可 要求：必须是 ES6

Entry ⽤用来指定 webpack 的打包⼊入⼝口 理理解依赖图的含义 依赖图的⼊入⼝口是 entry 对于⾮非代码⽐比如图⽚片、字体依赖也会 不不断加⼊入到依赖图中 Entry 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry 是⼀一个字符串串 多⼊入⼝口：entry 是⼀一个对象 module 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output: { filename: 'bundle.js’, path: __dirname + '/dist' } }; Output 的⽤用法：多⼊入⼝口配置 module.exports = { entry: 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module.exports = { output:

的⼯具：Snowpack 真的可以不⽤打包吗？ 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1.1 的请求数限制 HTTP/2 越来越多的应⽤在主流⽹站 bundle bundless a.js b.js c.js d.js bundle.js a.js b.js c.js d.js 资源加载的差异 资源加载的差异 - bundle

'raw-loader' } ] }, plugins: [ new HtmlwebpackPlugin({ template: './src/index.html’ }) ] }; 打包的⼊入⼝口⽂文件 打包的输出 环境 Loader 配置 插件配置 ·································· ·································

function(source) { const json = JSON.stringify(source) .replace(/\u2028/g, ‘\\u2028 ' ) // 为了安全起见, ES6模板字符串的问题 .replace(/\u2029/g, '\\u2029'); return `export default ${json}`; };