Question

我目前正在使用React，Redux，Express和Webpack构建Universal React项目。

我在确定开发与生产的确切构建流程以及在每个环境中注入构建的webpack脚本的最佳方法时遇到了一些麻烦。

我的制作流程如下所示

从webpack构建一个client.js包和server.js包。客户端包将呈现我的根React组件并将其附加到dom元素

渲染（，的document.getElementById（＆＃39;应用＆＃39;））

服务器包将导出一个接收请求/响应并匹配我的React路由器路由的函数，在预定义的html字符串中返回我的React.renderToString内容，该字符串包含我的client.js包的路径< / p>

function renderFullPage(renderedContent, initialState) {
  return `
    <!doctype html>
    <html lang="">
    <body>
    <div id="app">${renderedContent}</div>
    <script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>
    </body>
    </html>
  `
}

export default function render(req, res) {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      // const authenticated
      const store = configureStore({})
      const initialState = store.getState()
      const history = createMemoryHistory(createLocation())

      const renderedContent = renderToString(
        <Root {...renderProps } store={store} routes={routes} history={history} />
      )
      const renderedPage = renderFullPage(renderedContent, initialState)
      res.status(200).send(renderedPage)
    } else {
      res.status(404).send('Not Found')
    }
  })
}

启动一个匹配所有传入路由的快速服务器，并提供我构建的server.js文件

if（！isDev）{ const builtApp = require（＆＃39; ../../ dist / assets / app.server＆＃39;）; }

导出默认功能（app）{ app.get（＆＃39; *＆＃39;，（req，res，next）=＆gt; { isDev？ devApp（req，res）：builtApp（req，res） }） }

此过程适用于制作，但我不确定如何将其用于开发。对于开发，我首先启动我的快速服务器。我运行webpack来创建一个客户端包。然后我应用WebpackDevMiddleWare来防止输出实际的包。显然，当我运行上面的路由来获取我的非构建的server.js文件并运行它时，它会投诉，因为我没有在资产文件中建立客户端文件。

这个问题的解决方案是否有Webpack输出一个自动注入构建脚本的html文件？我试着看HtmlWebpackPlugin，但我不确定如何让它发挥作用。

如果我创建一个html shell并告诉HtmlWebpackPlugin将脚本注入其中然后构建一个索引文件，我该如何在里面注入我的React App组件？

谢谢！

到目前为止，我的设置是否有帮助：http://bit.ly/1OPR2zP

如何使用Webpack和WebpackDevMiddleWare注入捆绑的React

0 个答案: