Как мне встроить внешние узлы в определенную точку входа?

Question

Я настраиваю Webpack для поддержки изоморфного конвейера сборки для моего приложения React.Это включает в себя простое разбиение кода на клиентский и серверный код.Суть в том, что серверный код может с уверенностью ожидать, что нативные модули node будут доступны, а клиентский код явно не может.Каждый «split» правильно компилируется с установленными соответственно свойствами target: web и target: node.К сожалению, Webpack не поддерживает свойство target по записи .Кроме того, несколько конфигураций Webpack не будут использовать преимущества кода разделения / совместного использования, поэтому требуется также одна конфигурация.

Моя текущая (и очень простая) конфигурация приведена ниже.

  const config = {
    mode: "none",

    entry: {
      client: "./src/index.tsx",
      server: "./src/server.tsx",
    },

    output: {
      path: path.resolve(__dirname, "dist"),
      publicPath: "/",
    },

    resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: [".ts", ".tsx", ".js"],
      alias: {
        utilities: path.resolve(__dirname, "src/utilities"),
      },
    },

    module: {
      rules: [
        { test: /\.css$/, use: "css-loader" },
        // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
        { test: /\.tsx?$/, loader: "ts-loader", options: { transpileOnly: true } },
        { test: /.js$/, loader: "source-map-loader", enforce: "pre" },
        { test: /\.(png|svg|jpg|gif)$/, loader: "url-loader" },
      ],
    },

    optimization: {
      splitChunks: {
        chunks: "all",
      },
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          uglifyOptions: {
            mangle: {
              safari10: true,
            },
          },
        }),
      ],
    },

    plugins: [
      new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new ForkTsCheckerWebpackPlugin(),
    ],
  };

Как я могу гарантировать, что import s для серверного кода компилируется правильно, игнорируя отсутствующие node модули (fs, path, net и т. Д.) При сохранении цели web клиентской сборки?

Существует функция target: universal, которая выполняется .