Webpack 2与Multipage Express网络应用程序

Question

我们正在使用Express和React将我们的web应用程序从ASP.NET和jQuery迁移到Node.js。我们使用的是典型的多页应用程序(MVC)，我们对这种架构很满意，我们需要它来处理一些特殊情况(基本上是SEO，我们知道使用react now可以改进SEO)。

我们希望在不使用React路由器的情况下维护我们的路由，我们将使用Express MVC路由器，但我们希望使用带有React的WebPack 2。

第一步是迁移后端(我们几乎完成了)，第二步是将前端从jQuery迁移到React(是的，React类似于UI库，我们不想要Redux，我们可以很好地使用Component State，因为我们的页面不是很复杂，我们想重用组件)。

就像我们使用MVC Express路由一样，我们需要使用WebPack 2中的代码分割来为每个页面生成多个条目(js文件)，我们希望集成典型的东西来提高效率：实时重载、生产构建js等。

我们有一个WebPack的例子，用于创建入口库、供应商和公共库，但我们不知道如何与我们的server.js(Express应用程序)集成，并且有一个良好的流程。。。

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和实时重新加载来实现这一点吗？就像我们在创建react应用程序时所做的那样？有任何链接或教程可以解释如何将多页应用程序和WebPack一起使用吗？

谢谢！

Answer 1

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

基本的想法是，如果你想构建一个MPA，并且在开发过程中需要"通用"重载和反应热重载，你可以用browsersync程序作为代理，并且-非常重要的是运行webpack-dev中间件&browsersync内部的webpack热中间件，而不是您的网站/应用程序。

我花了一个星期的时间进行试验；错误，因此决定在GitHub上开源。

其他需要考虑的事项：

• 小心使用最新的webpack&加载程序/插件，即目前的webpack@^2.2.1和react-hot-loader@^3.0.0-beta.6，如果您遇到问题，请密切关注它们的转发并进行更新
• 如果您来自ASP.NET，您可能会对Vash模板引擎感兴趣

IMO，目前webpack及其整个加载程序/插件生态系统是前沿的，发展速度很快，正如你所看到的，构建一个现实的工作流配置几乎是疯狂的。但是在开发过程中进行完全重新加载的好处是巨大的。

希望这种疯狂会改变，现在webpack@2终于脱离了测试版。

希望这有帮助，并感谢你主演回购：-)

Answer 2

一个潜在不同方法的快速更新-尽管我在两个月前发布了quickstart express react，但我喜欢保持开放的心态，我仍在研究其他替代方案，以获得更好的开发体验。我可能已经找到一个了。

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

我目前正在寻找一种用React工具箱组件构建通用React网站/应用程序的合理方法，next.js看起来确实很有前景，尤其是对于一个单一/独立的开发人员或一个不想从头开始设置网络包场景的小团队来说。

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

免责声明：我现在加入ZEIT。几天前，当我看到next.js时，我非常激动…：-)