uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码 编译后（bundle.js） 编译前 (source code) 会导致什什么问题？ 运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 ⼤大量量作⽤用域包裹代码，导致体积增⼤大（模块越多越明显） 模块转换分析 结论： ·被 webpack 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 原理理 原理理：将所有模块的代码按照引⽤用顺序放在⼀一个函数作⽤用域⾥里里，然后适当的重命名⼀一 些变量量以防⽌止变量量名冲突 对⽐比: 通过 scope hoisting 可以减少函数声明代码和内存开销 scope hoisting 使⽤用 必须是 ES6 语法，CJS 不不⽀支持 webpack mode 为 production 默认开启 module.exports = { entry:

将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。 webpack 5 缓存策略 • 默认开启缓存，缓存默认是在内存⾥。可以对 cache 进⾏设置 。 • 缓存淘汰策略：⽂件缓存存储在 node_modules/.cache/webpack，最⼤ 500MB，缓存时常两个星期，旧的缓存先淘汰。 webpack

"webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC" } WDS 不不刷新浏览器器 WDS 不不输出⽂文件，⽽而是放在内存中 使⽤用 HotModuleReplacementPlugin插件 热更更新：使⽤用 webpack-dev-middleware const express = require('express');

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