多个项目共享 Webpack

最近在看 @keyframer 的一系列视频,需要用到 webpack 来配置 scss 环境,这就导致了每一个项目都要重复下载一遍 webpack 和相关的所有 node modules,这样很浪费空间。

因此要想办法把 webpack 独立出来,让每一个项目都可以访问到 webpack,一个方法是全局安装 webpack。这里提供另一种方法,想到我们通常使用 webpack 的情景是,在 package.json 里预先定义好

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
}

然后 npm run dev。我们需要把这里修改一下,让每个项目都统一调用同一个 webpack。

项目的结构是这样的:

.
├── Project1
│   ├── dist
│   ├── package.json
│   ├── src
│   └── webpack.config.js
├── Project2
│   ├── dist
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   └── webpack.config.js
├── Project3
│   ├── dist
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   └── webpack.config.js
├── node_modules // all webpack related node modules
├── package-lock.json
└── package.json

需要一个parent directory,在 parent directory 里首先 npn init -y,并安装好 webpack 和所有相关 node modules。为每一个子项目单独创建一个文件夹,把每个项目下 package.json 中的 script 修改成:

"scripts": {
    "dev": "../node_modules/.bin/webpack-dev-server",
    "build": "../node_modules/.bin/webpack"
 }

这样一来,仅仅安装了一遍 webpack,每个子项目都可以 access 到 parent directory 里的 webpack。而且每个子项目都可以独立配置 webpack,配置文件为 webpack.config.js

分类

标签