如何在另一个包中重用 webpack 包？答案

【问题标题】：How to reuse webpack bundle in another bundle?如何在另一个包中重用 webpack 包？
【发布时间】：2021-10-05 00:29:29
【问题描述】：

您好，我正在使用 SSR 构建一个 React 应用程序。服务器和客户端部分都用打字稿编写并分别转译。这里是为了更好理解的应用结构：

这里是服务器和客户端包的简化 webpack 配置：

// webpack.client.js

module.exports = {
  mode: "development",
  resolve: {
    modules: ["src", "static", "node_modules"],
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },

  entry: [
    "./src/client/index.tsx"
  ],

  output: {
    filename: "bundle.js",
    path: PUBLIC_PATH,
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
          }
        ],
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({ IS_SERVER: false })
  ]
};

除了target 和externals 之外，服务器配置看起来差不多

//webpack.server.js
const config = {
  mode: "development",
  resolve: {
    modules: ["src", "static", "node_modules"],
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },

  externals: [webpackNodeExternals()],
  target: 'node',

  entry: [
    "./src/server/index.ts"
  ],

  output: {
    filename: "bundle.js",
    path: SERVER_BUILD_PATH
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
          }
        ],
      },
    ]
  },

  plugins: [
    new webpack.DefinePlugin({ IS_SERVER: true })
  ]
};

在服务器代码中，我得到了一个 renderer 函数，它将 React 应用程序呈现为字符串。

// renderer.tsx
import React from "react";
import { renderToString } from "react-dom/server";
import { App } from "client/App";

const html = (app) => `
  <html>
    <head>
    </head>
    <body>
      <div id="root">${app}</div>
      <script src="/public/bundle.js"></script>
    </body>
  </html>
`;

export async function renderer(req) {
  const app = renderToString(<App />);
  return html(app);
}

然后由快递服务器返回给客户端。

//index.ts
app.get("*", async (req, res) => {
  const content = await renderer(req);
  res.send(content);
});

正如您所见，这两个部分都需要转译 React 应用程序。问题是 - 我如何在服务器包中重用已转译的客户端代码，以便服务器配置只需要转译 index.ts 和 renderer.tsx？

【问题讨论】：

嗨，Ivan，你有这个更新吗？

标签： javascript node.js reactjs webpack webpack-4

【解决方案1】：

您可以使用webpack-merge 包来做到这一点

这是我的example

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_URL': JSON.stringify('http://localhost:5000/')
            }
        })
    ],
    watch: true
});

【讨论】：

感谢您的回答。但是webpack-merge 解决了一个不同的问题。我想重用已编译的包而不是配置文件。

【解决方案2】：

这可以使用resolve.alias 轻松完成： https://webpack.js.org/configuration/resolve/#resolvealias

只需将helpers 目录在应用的目录层次结构中向上移动并从中导入。

在您的情况下，我还想在您的应用程序的根级别使用单个 webpack.config.js 文件重新设计应用程序，您可以在其中组合 客户端 和 服务器 em> 配置使用 multi-compiler 功能并遵守“不要重复自己”的原则： https://stackoverflow.com/a/43689505/2569746

【讨论】：