随笔分类 - webpack
摘要：optimization来对打包结果进行优化（生产环境优化）。 文档: https://webpack.docschina.org/configuration/optimization/ 1.文件结构 2.代码 a.js export function add(x, y) { return x +
阅读全文
摘要：webpack开发服务器可用于快速开发应用程序。 1.文件结构 2.代码 index.css html, body { height: 100%; background-color: pink; } index.js import '$css/index'; webpack.config.js co
阅读全文
摘要：1.文件结构 2.代码 index.css html, body { height: 100%; background-color: pink; } index.js html, body { height: 100%; background-color: pink; } webpack.vconf
阅读全文
摘要：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 本质上，webpack
阅读全文
摘要：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中. 文档: https://www.webpackjs.com/concepts/output/ 1.文件结构
阅读全文
摘要：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 文档: https://www.webpackjs.com/concepts/entry-points/ 1.
阅读全文
摘要：随着项目越来越大，项目里的依赖包也越来越多，所以打包和项目启动速度会变慢。 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 从而每次只需要打包真正的项目代码，提升了打包速度。 当你运行 webpack 时，默认查找 webpack.config.js 配置文
阅读全文
摘要：externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 这里是排除 jQuery的打包。 1.
阅读全文
摘要：thread-loader: 把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行 开启多进程打包。 进程启动大概为600ms，进程通信也有开销。 只有工作消耗时间比较长，才需要多进
阅读全文
摘要：PWA: 渐进式网络开发应用程序(离线可访问) workbox --> workbox-webpack-plugin 1.文件结构 2.代码 index.css html,body{ margin: 0; padding: 0; height: 100%; background-color: sky
阅读全文
摘要：//懒加载: 当文件需要时才加载~//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true) //正常加载可以认为是并行加载(同一时间加载多个文件)。// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容
阅读全文
摘要：1.文件结构 2.代码 index.js function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } /* * 通过js代码，让某个文件被单独打包成一个chunk * import 动态导入语法: 能将某个文件单独打包 * */ /
阅读全文
摘要：1.文件结构 2.代码 import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3
阅读全文
摘要：1.文件结构 2.代码 index.js import { mul } from './test'; function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console
阅读全文
摘要：tree shaking：去除无用代码 前提：1. 必须使用ES6模块化 2. 开启 production 环境 作用: 减少代码体积 在package.json中配置 "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking） 问题：可能会把css / @
阅读全文
摘要：缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快 文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和css同时使用一个hash值。 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件） chunk
阅读全文
摘要：oneOf的作用 提升构建速度，避免每个文件都被所有loader过一遍， 因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。在webpack.config.js 中配置 oneOf 1.文件结构 2.代码 webpack.config.js const {resol
阅读全文
摘要：source-map 一种 提供 源代码 到 构建后代码映射 技术 (如果构建代码出错了，通过映射可以追踪源代码错误) 在 webpack.config.js 中配置 devtool 指定 source-map 1.文件结构 2.代码 webpack.config.js const {resolve
阅读全文
摘要：HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 1.文件结构 2.代码 iconfont.css @font-face {font-family: "iconfont"; sr
阅读全文
摘要：# webpack性能优化* 开发环境性能优化* 生产环境性能优化## 开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map## 生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll* 优化
阅读全文
