Question

我正在服务器上渲染我的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时可以解析script标记？

Answer 1

这很简单，但有点复杂，首先我解释所有方法，然后在代码中显示。

您应该考虑存放<system.webServer> <defaultDocument> <files> <add value="insertion.aspx" /> </files> </defaultDocument> <directoryBrowse enabled="false" /> </system.webServer>版本之外的所有JavaScript个文件的文件夹。然后将它们放入此文件夹，然后将其作为webpack导入到externals配置中。然后将其设置为单独的供应商文件，并且绝对输出文件的名称应动态生成，因此webpack建立其捆绑包，然后将您的webpack文件复制到dist文件夹中。请按照以下步骤操作：

JavaScript

通过使用上面的代码，您考虑了// webpack.config.js ... module.exports = { ... externals: { separateFile: `${srcRoot}/outFiles/yourJavaScriptFile.js`, }, ... };文件的文件夹，并将其作为JavaScirpt配置导入到webpack配置中。

现在，您应该将其作为应用程序文件旁边的单独文件导入。见下文：

externals

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

// 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
    }
    ...
};

Answer 2

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

Webpack构建之外的服务器渲染脚本标记

2 个答案: