将npm软件包与webpack捆绑在一起，但不包括所有供应商软件包

Question

我已经在这个问题上花费了几个小时，但遇到了麻烦。

tl; dr：将我的自定义组件与webpack捆绑会导致undefined或'call' of 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

我会继续提出这个问题，以防万一有人遇到同样的问题。