如何在 monorepo(yarnpkg 工作区)中使用 webpack [英] How to use webpack with a monorepo (yarnpkg workspaces)

问题描述

我正在使用 纱线工作区其中根目录有一个包含我所有存储库的包目录.每个 repo 都有自己的 node_modules 目录，其中包含其依赖项.根 node_modules 目录包含整个项目的所有开发依赖项以及所有其他开发相关的东西，比如 webpack.config 文件.Webpack 对 express 服务器包使用热模块重新加载.

I'm using yarn workspaces where the root directory has a package directory with all my repos. Each repo has its own node_modules directory containing its dependencies. The root node_modules directory contains all the dev dependencies for the whole project as well as all other dev related things such as webpack.config files. Webpack uses hot module reload for the express server package.

我遇到的问题是，如何配置 webpack externals 以排除整个项目中的所有 node_modules 目录，而不仅仅是在根目录中?

The problem I have is, how to configure webpack externals to exclude all node_modules directories through the whole project, not just in the root?

webpack-node-externals 在这种情况下似乎不起作用.

webpack-node-externals doesn't seem to work given this scenario.

错误信息:

WARNING in ./packages/servers/express/node_modules/colors/lib/colors.js
127:29-43 Critical dependency: the request of a dependency is an expression

WARNING in ./packages/servers/express/node_modules/express/lib/view.js
79:29-41 Critical dependency: the request of a dependency is an expression

Webpack 配置:

Webpack config:

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');

module.exports = {
  entry: [
    'babel-polyfill',
    'webpack/hot/poll?1000',
    path.join(__dirname, '../packages/servers/express/server/index.js')
  ],
  watch: true,
  target: 'node',
  externals: [
    nodeExternals({
      whitelist: ['webpack/hot/poll?1000']
    })
  ],
  resolve: {
    alias: {
      handlebars: 'handlebars/dist/handlebars.js'
    }
  },
  module: {
    rules: [
      {
        test: /.js?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new StartServerPlugin('server.js'),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': { BUILD_TARGET: JSON.stringify('server') }
    })
  ],
  output: {
    path: path.join(__dirname, '../packages/servers/express/.build'),
    filename: 'server.js'
  }
};

推荐答案

如果使用带有 webpack-node-externals 的 yarn 工作区，比设置 modulesFromFile: true 更好的解决方案是在您的 webpack 配置中使用以下 externals 设置:

If using yarn workspaces with webpack-node-externals a better solution than setting modulesFromFile: true is to use the following externals setting in your webpack config:

externals: [
  nodeExternals(),
  nodeExternals({
    modulesDir: path.resolve(__dirname, 'path/to/root/node_modules'),
  }),
],

本质上使用了 nodeExternals 的两个实例.1 个用于包 node_modules，一个用于根 node_modules.

Essentially using two instances of nodeExternals. 1 for the package node_modules and one for the root node_modules.

这篇关于如何在 monorepo(yarnpkg 工作区)中使用 webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！