前端探索者

Webpack是一个现代JavaScript应用的静态模块打包器，它能够将项目中的所有依赖项（包括JavaScript、图片、CSS等）打包成一个或多个bundle。在Webpack的构建过程中，存在许多生命周期钩子（hooks），这些钩子允许插件（plugins）和loaders在不同阶段介入构建过程。创建一个 JavaScript 文件作为 Plugin，比如。在这个文件中，定义一个类，这个类必须实现apply方法。在apply方法中,接受compiler。

Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。

本文分两部分来介绍：第一部分：将先介绍 webpack 打包 Vue 需要用到的 Vue 相关包，然后配置项目目录及必要文件，最后配置 webpack.config.js，运行项目第二部分：探索 cdn、分包、tree Shaking、已经热更新的使用`

本文介绍了webpack中的一些核心概念，例如：webpack 核心包：配置文件导出三种方式：在线配置 webpack配置文件解析：入口（Entry）：输出（Output）：加载器（Loaders）：插件（Plugins）：模式（Mode）：目标（Target）：webpack 的 runtime 和 manifest服务器模块解析配置优化配置热模块替换（Hot Module Replacement, HMR）：代码分割（Code Splitting）：在 Node 中使用

babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持

工作区是一个通用术语，它支持在单个顶层根包中管理本地文件系统中的多个包, 工作区是一种设置包架构的新方法，从 Yarn 1.0 开始默认可用。它允许你以这样的方式设置多个软件包，只需运行 yarn install 一次即可一次性安装所有软件包。现在我们的项目功能是，每个项目拥有自己的包（与主版本不同的），相同的版本包进行提升至根目录现在项目的

将大型代码仓库分割成多个独立版本化的 软件包（package）对于代码共享来说非常有用。但是，如果某些更改 跨越了多个代码仓库的话将变得很 麻烦 并且难以跟踪，并且， 跨越多个代码仓库的测试将迅速变得非常复杂。Lerna 是一种工具，针对 使用git 和 npm管理多软件包代码仓库的工作流程进行优化Lerna 对任意数量的项目运行命令，它以最有效的方式、以正确的顺序执行Lerna 管理你的发布流程，从版本管理到发布到 NPMLerna 速度很快，甚至比大多数同类解决方案还要快。

前面两篇，我们讲了和lerna， yarn + lerna 的组合已经是现在 monorepo 的通用方案，也是功能最多，最火的方案,如果还没看，可以回顾下Monorepo仓库管理策略之 LernaMonorepo仓库管理策略之yarn workspaces是 pnpm 的一个特性，它允许你管理多个包（或项目）作为一个单一的单元。这在开发大型的、由多个包组成的应用程序时非常有用，例如在微服务架构或库的多个版本中。