什么是 webpack-workspaces
Webpack-workspaces 是一个在 npm 包管理工具上面工作的 Webpack 插件，它的主要功能是针对 monorepo 相关的项目，将多个包打包成一个大项目，同时也能保证各个子包之间的独立性。
准备工作
在开始使用 webpack-workspaces 的时候，你需要准备一些前置知识和工具，包括：
- Node.js 环境
- npm 包管理器
- 一份基本的 webpack 配置文件
- 一个 monorepo 管理器或者手动维护
安装
你可以使用 npm 包管理工具，在你的项目中安装 webpack-workspaces：
npm i webpack-workspaces --save-dev
安装成功之后，你需要配置你的 webpack 配置文件：
const WorkspacesPlugin = require('webpack-workspaces');
// 更多配置项部分省略
module.exports = {
plugins: [new WorkspacesPlugin()],
};使用 webpack-workspaces
指定入口
当你使用 webpack-workspaces 的时候，它会自动读取你的项目中的所有包，并将其一一打包为一个整体。你不需要手动指定需要打包的包，在配置文件中添加入口即可：
-- -------------------- ---- -------
-------------- - -
------ ------------------------------- -- --
------- -
----- ----------------------- --------
--------- ------------
--
-------- ---- --------------------
-- ---------
--启用多个入口
Webpack-workspaces 还支持启用多个入口打包，只需要在配置文件中指定多个入口即可：
-- -------------------- ---- -------
-------------- - -
------ -
--------- -------------------------------
--------- -------------------------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
-------- ---- --------------------
-- ---------
--共享模块
在 monorepo 中，很多情况下都需要共享模块。Webpack-workspaces 也为此提供了解决方案，只需要在对应的包中定义一个公共依赖即可：
// packages/package1/index.js import _ from 'lodash'; // 使用公共依赖 import foo from '../common/foo'; // 引入本地模块 console.log(_.join(['hello', 'webpack'], ' ')); console.log(foo());
// packages/package2/index.js import _ from 'lodash'; // 使用公共依赖 import bar from '../common/bar'; // 引入本地模块 console.log(_.join(['hello', 'webpack'], ' ')); console.log(bar());
其中 lodash 模块是两个包之间共享使用的，Webpack-workspaces 会自动将公共依赖打包到独立的文件中，并将其注入到两个包的源文件中。
执行打包
在你的项目根目录下，执行以下命令即可开始打包：
npx webpack
Webpack-workspaces 会自动读取你的 monorepo 项目结构，将所有需要打包的包都打包成一个整体，你可以在打包成功之后查看输出的 dist 目录，检查是否正确。
总结
Webpack-workspaces 是一个非常方便的工具，在 monorepo 项目开发中使用它可以大大的提升开发效率，同时也能保证依赖包的完整性和独立性。希望此篇文章能对你了解 webpack-workspaces 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc67