如何将Webpack与Monorepo配合使用(yarnpkg工作区) [英] How to use webpack with a monorepo (yarnpkg workspaces)

问题描述

我正在使用纱线工作区根目录中有一个包含我所有存储库的包目录.每个存储库都有其自己的node_modules目录，其中包含其依赖项.根node_modules目录包含整个项目的所有dev依赖关系以及所有其他与dev相关的东西，例如webpack.config文件. Webpack将快速模块重载用于快速服务器软件包.

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外部组件以在整个项目中(而不只是在根目录中)排除所有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一起使用，比设置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的两个实例.对于包node_modules是1，对于根node_modules是1.

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

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