webpack 构建之外的服务器渲染脚本标签答案

【问题标题】：server render script tag outside of webpack buildwebpack 构建之外的服务器渲染脚本标签
【发布时间】：2023-03-17 05:16:01
【问题描述】：

我正在服务器渲染我的 React 应用，如下所示：

export default ({ clientStats }: { clientStats: any }) => async (req: Request, res: Response, next: any) => {
  const context: any = {};

  const app = (
    <StaticRouter location={req.url} context={context}>
      <Application />
    </StaticRouter>
  );

  if (context.url) {
    res.writeHead(301, {
      Location: context.url
    });

    res.end();
    return;
  }

  const { styles, js, scripts } = flushChunks(clientStats, {
    chunkNames: flushChunkNames()
  });

  const appString = renderToString(app);
  const { title } = Helmet.renderStatic();

  res.status(200).send(`
    <!doctype html>
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        ${styles}
        ${title}
      </head>
      <body>
        <div id="root">${appString}</div>
        <script type=\'text/javascript\' src=\'init.js\' defer></script>
      </body>
    </html>
`);
};

如何引用 webpack 构建之外的脚本？

我有一个 init.js 文件，它的作用很小，我只想引用它。

我可以把它放在哪里，以便在呈现 html 时，脚本标签解析？

【问题讨论】：

标签： webpack

【解决方案1】：

就是这么简单，就是有点复杂，先解释所有方法，再用代码展示。

您应该考虑为所有JavaScript 文件在webpack 构建之外的文件夹。然后将它们放入此文件夹，然后将其作为externals 导入到webpack 配置中。然后将其设置为单独的供应商文件，并且绝对输出文件名应动态生成，因此webpack 构建其捆绑包，然后将您的JavaScript 文件复制到 dist 文件夹中。如下：

// webpack.config.js
...
module.exports = {
    ...
    externals: {
        separateFile: `${srcRoot}/outFiles/yourJavaScriptFile.js`,
    },
    ...
};

通过使用上述代码，您可以考虑为您的 JavaScirpt 文件创建一个文件夹，并将其作为 externals 配置导入到 webpack 配置中。

现在您应该将它作为一个单独的文件与您的应用程序文件一起导入。见下文：

// webpack.config.js
...
module.exports = {
    ...
    entry: {
        myFile: 'separateFile', // <== its your external imported file
        app: `${srcRoot}/app/index.js`, // <== its your app file
    },
    output: {
        path: '/dist',
        filename: '[name].js' // <== dynamically make your JavaScript files,
                              //      so, in dist folder you can see app.js and
                              //      myFile.js file
    }
    ...
};

当然，您应该将这些文件导入模板函数，因此：

  ...
  res.status(200).send(`
    <!doctype html>
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        ${styles}
        ${title}
      </head>
      <body>
        <div id="root">${appString}</div>
        <script src="app.js" defer></script>
        <script src="myFile.js" defer></script>
      </body>
    </html>
 `);
...

【讨论】：

【解决方案2】：

您必须在项目构建的根目录中设置init.js，以便在渲染文件时服务器会使用它，您可以在此处查看示例：https://github.com/webpack/webpack.js.org/blob/rebuild/src/server.jsx

【讨论】：

如果我只是将 init.js 放入项目的根目录，它不会复制到 dist 文件夹。
我最终使用了 copy-webpack-plugin 来解决我的问题
@dagda1, 使用copy-webpack-plugin 是个好方法，但不是正确方法。
@AmerllicA 为什么不是正确的方法？
Webpack 是模块捆绑器，而不是任务管理器，使用该插件 copy-webpack-plugin，您可以使用 webpack 作为任务管理器。我以前从未见过这样的，因此我说，这不是正确的方法。将jQuery 添加到react 应用程序是一个常见问题，常见的答案是使用externals 的webpack。但是你的项目现在可以工作了，没关系，继续使用copy-webpack-plugin。