loader 传递给 AST，减少解析时间 使用字符串方法替代正则表达式 多进程/多实例构建：资源并行解析可选方案 多进程/多实例：使用 HappyPack 解析资源 HappyPack工作流程 原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 代码示例 多进程/多实例：使用 thread-loader 解析资源 原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 多进程/多实例：并行压缩 方法一：使用 parallel-uglify-plugin 插件 多进程/多实例：并行压缩 方法二：uglifyjs-webpack-plugin 开启 parallel 参数 多进程/多实例：并行压缩 方法三：terser-webpack-plugin 开启 parallel 参数

}) + ] + } + } ] } ] } }; 浏览器器的分辨率 CSS 媒体查询实现响应式布局 缺陷：需要写多套适配样式代码 @media screen and (max-width: 980px) { .header { width: 900px; } } @media screen and (max-width: //将所有的style标签合并成一个 } }, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index search: './src/search.js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 利利⽤用 glob.sync module.exports = { entry: { index:

不不断加⼊入到依赖图中 Entry 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry 是⼀一个字符串串 多⼊入⼝口：entry 是⼀一个对象 module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; /path/to/my/entry/file.js' output: { filename: 'bundle.js’, path: __dirname + '/dist' } }; Output 的⽤用法：多⼊入⼝口配置 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename:

代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 多 Loader 时的执行顺序 多个 Loader 串行执行 顺序从后到前 module.exports = { entry: './src/index.js', output: