想象一下我有这样一个项目:
/moduleA/src...
/moduleB/src...
/mainApp/src...
我为每个模块和主应用程序都有单独的webpack.config。这些模块是库,主应用程序导入这些库。
是否可能配置webpack-dev-server来服务于所有三个?
我想避免的是每次想要更改moduleA或B时停止开发服务器,重新构建moduleA和moduleB,然后重新启动开发服务器。
想象一下我有这样一个项目:
/moduleA/src...
/moduleB/src...
/mainApp/src...
webpack-dev-server
无法实现此目的,因为该工具仅构建用于监视和提供单个Webpack应用程序配置。webpack-dev-server
以针对应用程序,以及每个包依赖项使用一个监视器。监视器中的任何一个重建将导致Webpack重新构建应用程序。for each dependency package, e.g. moduleA
:
install cross-env
:
yarn add cross-env
set up webpack as a watcher in development mode by adding watch
to the config:
watch: process.env.NODE_ENV === "development"
add an NPM script "start:dev"
:
"start:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"
for the application package, e.g. mainApp
:
install cross-env
:
yarn add cross-env
add an NPM script "start:dev"
:
"start:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"
in the monorepo root:
install concurrently
yarn add concurrently
add the NPM scripts* for calling the application and each dependency package's "start:dev"
and a "start:dev"
which uses them:
"watch:app": "cd packages/mainApp && npm run start:dev",
"watch:moduleA": "cd packages/moduleA && npm run start:dev",
"watch:moduleB": "cd packages/moduleB && npm run start:dev",
"start:dev": "
concurrently
\"npm run watch:app\"
\"npm run watch:moduleA\"
\"npm run watch:moduleB\"
"
bootstrap your monorepo with lerna:
lerna bootstrap
start the app dev server and watchers for all of the dependency packages:
npm run start:dev
navigate to your application dev server endpoint, e.g. localhost:8080
附加说明:如果单体仓库不可行,您可以考虑使用yarn link
的组合和一个应用程序package.json
中的NPM脚本,如下所示*:
{
"start:dev": "
concurrently
\"cross-env NODE_ENV=development webpack --config webpack.config.js\"
\"cd ./node_modules/moduleA && npm run start:dev\"
\"cd ./node_modules/moduleB && npm run start:dev\"
"
}
注意:NPM脚本中的换行符是为了增加可读性而添加的;如果您在package.json
中使用这些脚本,则必须折叠换行符。