Question

我们正在使用Express和React将我们的Web应用程序从ASP.NET和jQuery迁移到Node.js。我们正在使用典型的多页面应用程序（MVC），我们对这种架构很有帮助，我们需要它来处理一些特殊情况（基本上是SEO，我们知道现在你可以通过反应改进SEO）。

我们希望在不使用React Router的情况下维护我们的路由，我们将使用Express MVC Router，但我们希望将WebPack 2与React一起使用。

第一步是迁移BackEnd（我们差不多完成了），第二部分是将前端从jQuery迁移到React（是的，React就像UI库，我们不想要Redux，我们可以正常工作组件状态因为我们的页面不是很复杂，我们想重用组件）。

就像我们使用MVC Express路由一样，我们需要使用WebPack 2中的Code Spliting为每个页面生成多个条目（js文件），并且我们希望集成典型的东西以提高工作效率：实时重新加载，生成构建js，等

我们有一个WebPack工作的例子来创建Entry库，供应商和常见的，但是我们不知道如何与我们的server.js（Express app）集成，并且流程很好...

示例WebPack配置：

var path = require('path')
var webpack = require('webpack')

var config = {
  entry: {
    vendors: ['react', 'lodash'],
    common: ['lodash'],
    home: path.resolve(__dirname, './src/main'),
    page1: path.resolve(__dirname, './src/page1'),
    page2: path.resolve(__dirname, './src/page2'),    
  },
  output: {
    path: path.join(__dirname, 'js'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  devtool: 'source-map',
  devServer: {
    inline: true,
    contentBase: './src',
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      },
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
            names: ["common", "vendors"],
            minChunks: Infinity
        })

  ]
}

if (process.env.NODE_ENV === 'production') {
  config.output.path = path.join(__dirname, 'dist/')

  /*
  Note: by default, React will be in development mode
        see https://facebook.github.io/react/downloads.html
  */
  config.plugins.push(new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': '"production"'
    }
  }))
}

module.exports = config

我的问题是......我们可以使用Express和实时重新加载吗？就像我们使用create-react-app一样？任何链接或教程解释如何一起使用Multipage应用程序和WebPack？

谢谢！

Answer 1

我是quickstart-express-react的作者。我们显然面临着类似的挑战，因此我更新了回购以更好地说明您的使用方案。

基本思想，如果您正在构建MPA并且需要在开发期间进行“通用”重新加载和反应热重新加载，您可以以编程方式使用browsersync作为代理，并且 - 非常重要运行webpack-dev-middleware＆amp;在browsersync内部webpack-hot-middleware，而不是您的网站/应用程序。

我花了一个星期的试用期构建该场景时出错，因此决定在GitHub上开源。

需要考虑的其他事项：

小心使用最新的网络包＆amp;加载器/插件，即webpack@^2.2.1和react-hot-loader@^3.0.0-beta.6目前，如果您遇到问题，请留意他们的回购并更新;
如果您来自ASP.NET，您可能会对Vash template engine感兴趣。

IMO，目前webpack及其整个加载器/插件生态系统正在快速发展，正如您所见，构建逼真的工作流配置几乎是疯狂的。但是在开发过程中完全重新加载的好处是巨大的。

希望疯狂会发生变化，现在webpack @ 2终于退出了测试阶段。

希望这会有所帮助，谢谢你主演的回复： - ）

Answer 2

关于可能不同的方法的快速更新 - 虽然我在两个月前发布了quickstart-express-react，但我仍然保持开放的心态，我仍在研究其他替代方案，以获得更好的开发人员体验。我可能找到了一个。

既然你写了你已经完成移植后端，这可能不是你现在想要的，但是对于未来的项目，一定要检查并密切关注next.js，特别是如果你对建立同构/通用反应应用感兴趣。我认为ZEIT的人员在简化整个开发工作流程方面做得非常出色，特别是考虑到webpack生态系统的当前状态。

我目前正在寻找一种使用react-toolbox components构建通用React网站/应用的明智方式，next.js确实看起来很有希望，特别是对于单个/独立开发人员或不想要的小团队处理从头开始设置webpack场景的全部复杂性。

他们还提供了一个出色的云部署解决方案，但值得一提的是next.js是完全开源的（MIT许可证），它可以在任何基础设施上的dev / prod中使用。

免责声明：我现在与ZEIT有联系。几天前我遇到next.js时，我感到非常激动......： - ）

带有Multipage Express Web应用程序的Webpack 2

2 个答案: