Webpack 学习笔记

一、通用环境 1. 更新到最新版本 使用最新的 Webpack 版本，Webpack 团队会经常进行性能优化； 将 Node.js 更新到最新版本，也有助于提高性能； 将 package 管理工具（如

一、不同的方式共享模块 1. NPM 方式共享模块 正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线。 如下图，对于项目 Home 与 Search，需要共享一个

一、构建一个 Library 相关代码 一个第三方 Library，一般是可以通过多种方式引入的，下面介绍了通过 script、CommonJS、AMD、ESModule 方式引入第三方库，Webpa

相关代码 shimming 预置依赖使用场景： 一些第三方库可能会创建一些需要导出的全局变量； 当希望扩展浏览器能力，来支持到更多用户时。 一、Shimming 预置全局变量 一般来说，我们是在一个文

相关代码 一般来说，我们的项目都是在启动了一个 server 的情况下运行的，当用户处于离线（offline）状态，或者我们关闭了 server，用户就不能正常使用程序。 现在，我们可以通过 PWA，

相关代码 1. Tree shaking 示例 假设有以下文件： 执行 npx webpack 后，查看 dist/main.js： 可以看到，打包后的文件直接获取了 add 方法执行后的值，引入的

相关代码 一、entry 配置 1. 单个入口（字符串写法） 2. 多个入口（数组写法） 由于 app.js 中引入了 lodash 第三方库，所以打包出来的 bundle 中包含了 lodash 的

一、PostCSS 与 CSS 模块 相关代码 1. PostCSS 在 Webpack 中使用 PostCSS，需要安装 style-loader、css-loader、postcss-loader

相关代码 一、Webpack 模块与解析原理 1. Webpack 模块 能在 Webpack 工程化环境里成功导入的模块，都可以视作 Webpack 模块。与 Node.js 模块相比，Webpac

一、git-hooks 执行命令，进入到 hooks 文件夹： 我们期望在 git commit 前，对代码进行检测，如果不能通过检测，就无法提交代码。查看 hooks 中的文件，有个 pre-com

相关代码 注意，本文使用的 ESlint 版本是 7.32.0。 一、ESlint 配置 ESlint，只需要在根目录下添加一个 .eslintrc 文件（或者 .eslintrc.json、.esl

相关代码 一、模块热替换 模块热替换使用的是 HotModuleReplacementPlugin 插件，在 Webpack4 中需要手动安装和使用，但在 Webpack5 中可以直接使用。 1. 配

相关代码 一、基本使用 static: resolve(__dirname, './dist')：把 dist 目录当作 web 服务的根目录 compress: true：是否在服务器端进行代码压缩

相关代码 通过 Webpack 将源码 index.js 打包成 index.bundle.js，那么浏览器中运行的就是打包后的 index.bundle.js，一旦代码报错，报的将是 index.b

相关代码 一、公共路径 通过 publicPath 来指定应用程序中所有资源的基础路径。 二、环境变量 1. 基本使用 Webpack 命令行环境配置的 --env 参数，可以允许你传入任意数量的环境

相关代码 通过缓存，可以降低网络流量，使网站加载速度更快。但是，如果在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用资源的缓存版本。 Webpack 中可以使用一些配置，以确保

相关代码 Webpack 能够把代码分离到不同的 bundle（打包分离出来的文件） 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用

相关代码 一、为什么需要 babel-loader Webpack 自带加载 JS 模块的功能，但是只能做 JS 模块化的打包，并不能转化 JS 代码，比如 ES6 转成 ES5。如果将 ES6 代码

相关代码 一、什么是 loader Webpack 默认只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。但是通过 loader，能够让 Webpack 去

Webpack 最出色的功能之一就是，除了引入 JavaScript，还可以利用内置的资源模块（Asset Modules）引入任何其他类型的文件。 资源模块（Asset Module）是一种模块类型