Question

我正在配置Webpack以支持我的React应用程序的同构构建管道。这涉及到在客户端与服务器代码上的简单代码拆分。问题是服务器代码可以安全地期望本地node模块可用，而客户端代码显然不能。使用分别设置的target: web和target: node属性可以正确地编译每个“ split”。不幸的是，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模块（fs，path，net等），同时保持node的目标来确保web到服务器端代码的正确编译客户建立？

有一个in progress的target: universal功能。

如何将节点外部组件构建到特定的入口点？

0 个答案: