将 npm 包与 webpack 捆绑，但排除所有供应商包

Question

我已经在这个问题上花费了几个小时，但我被困住了。

tl;dr: 将我的自定义组件与 webpack 捆绑会导致 undefined 或 'call' of undefined 错误（加载未捆绑的供应商包时）。请参阅下面生成的 webpack 配置。

---

我用一个简单的 TypeScript 包创建了一个单源代码库。当我用 tsc 编译它时，一切正常。但是一使用Relay，我就遇到了问题。所以我想，我只是使用 webpack。说起来容易做起来难。

当然，我只是想捆绑，有什么必要。还有我当前的问题：当捆绑包尝试解析 ../../node_modules/react/index.js 时出现错误。

我认为commonjs2 可能是我在另一个 webpack 项目中使用该包的方式。

const webpackConfig = {
  mode: "production",
  resolve: {
    extensions: [ ".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx", ".tsx", ".ts" ],
    modules: [
      "<mono-repo-root>/node_modules",
      "<mono-repo-root>/packages/custom-navigation/packages"
    ],
    alias: {
      packages: "<mono-repo-root>/packages/custom-navigation/packages",
      react: "<mono-repo-root>/node_modules/react",
      "react-dom": "<mono-repo-root>/node_modules/react-dom"
    }
  },
  module: {
    rules: [
      {
        test: /\.ts(x)?$/,
        enforce: "pre",
        use: [
          {
            loader: "tslint-loader",
            options: {
              configFile: "<mono-repo-root>/tslint.js",
              tsConfigFile: "<mono-repo-root>/tsconfig.json",
              formatter: "stylish",
              emitErrors: false
            }
          }
        ]
      },
      {
        test: /\.ts(x)?$/,
        exclude: [ /node_modules/ ],
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [ "@babel/preset-react" ],
              plugins: [ "relay" ]
            }
          },
          {
            loader: "ts-loader",
            options: {
              configFile: "<mono-repo-root>/packages/custom-navigation/tsconfig.json"
            }
          }
        ]
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  },
  plugins: [
    // Add module names to factory functions so they appear in browser profiler.
    new webpack.NamedModulesPlugin(),
    // Makes some environment variables available to the JS code, for example:
    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
    new webpack.EnvironmentPlugin( getEnv() ),
    // Watcher doesn't work well if you mistype casing in a path so we use
    // a plugin that prints an error when you attempt to do this.
    // See https://github.com/facebookincubator/create-react-app/issues/240
    new CaseSensitivePathsPlugin(),
    // Moment.js is an extremely popular library that bundles large locale files
    // by default due to how Webpack interprets its code. This is a practical
    // solution that requires the user to opt into importing specific locales.
    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
    // You can remove this if you don't use Moment.js:
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ],
  node: {
    "dgram": "empty",
    "fs": "empty",
    "net": "empty",
    "tls": "empty",
    "child_process": "empty"
  },
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: "all"
    }
  },
  target: "node",
  entry: "<mono-repo-root>/packages/custom-navigation/Navigation.tsx",
  output: {
    path: "<mono-repo-root>/packages/custom-navigation/dist",
    filename: "index.js",
    library: "@custom/navigation",
    libraryTarget: "commonjs2", // tried umd, commonjs and commonjs2
    publicPath: "/dist/"
  },
  externals: [
    webpackNodeExternals(), // npmjs.com/package/webpack-node-externals
    webpackNodeExternals( { modulesDir: 'packages/custom-navigation/node_modules' } )
  ]
}

Answer 1

天哪，我已经这么近了！原来commonjs2 确实是正确的libraryTarget。然而，splitChunks: { chunks: "all" } 在这里实际上会造成麻烦，并且实际上会尝试解析供应商模块而不是忽略它。

tl;dr: 删除 optimization.splitChunks

我保留这个问题，以防万一其他人遇到同样的问题。