Question

我有一个反应应用程序，它在快速服务器上运行，并与webpack捆绑在一起。我的问题是，每当我重新启动服务器时，就像我对其进行更改一样，重建前端捆绑包需要永远，即使我没有对前端进行任何更改。

当只是进行不涉及前端捆绑的服务器/ api更改时，重新加载服务器部分并保持当前前端捆绑是很好的。

以下是在开发环境中运行的代码：

 const compiler = webpack(webpackConfig)
  const middleware = webpackMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
    contentBase: 'src',
    stats: {
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false
    }
  })

  app.use(middleware)
  app.use(webpackHotMiddleware(compiler))
  app.get('*', (req, res) => {
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'build/app.html')))
    res.end()
  })

有更聪明的方法吗？是否可以将当前前端捆绑包留在内存中并重新加载服务器？或者我可以检测是否需要更新捆绑包并且如果不需要更新则跳过该过程？

欢迎任何提示，建议和建议！如果您需要任何其他信息，请告诉我。谢谢！

Answer 1

Chokidar解决方案

如果使用webpack-dev-tools，则可以使用chokidar

来查看更改

Chokidar仍然依赖于Node.js核心fs模块，但在使用时 fs.watch和fs.watchFile用于观看，它将事件规范化接收，通常通过获取文件统计信息和/或目录来检查真相内容。

这是使用chokidar仅观看目标文件夹的一个小例子。通过仅定位特定文件夹，您可以保持前端完好无损。我没有尝试过针对您的特定用例，但初看起来这似乎可能符合您的需求。

var production = process.env.NODE_ENV === 'production'
if(!production) {
  var chokidar = require('chokidar')
  var watcher = chokidar.watch('./targetfolder')
  watcher.on('ready', function() {
    watcher.on('all', function() {
      console.log("Clearing /targetfolder/ module cache from server")
      Object.keys(require.cache).forEach(function(id) {
        if (/[\/\\]targetfolder[\/\\]/.test(id)) delete require.cache[id]
      })
    })
  })
}

在Github上有一个很好的例子，名为Ultimate Hot Reloading Example

注意：webpack-dev-server不会将文件写入磁盘，它通过Express实例从内存中提供结果。但webpack --watch会将文件写入磁盘。

举例解决方案

您可以使用网络包 - 手表标志。

在package.json中，启动服务器的脚本块（或运行webpack的脚本块）添加此webpack --progress --colors --watch。

请参阅Webpack documentation，它说：

我们不希望在每次更改后手动重新编译......

使用监视模式时，webpack会将文件监视器安装到编译过程中使用的所有文件。如果检测到任何更改，它将再次运行编译。启用缓存后，webpack会将每个模块保留在内存中，并在未更改时重复使用。

package.json中的示例：

"scripts": {
  "dev": "webpack --progress --colors --watch"
}

Answer 2

我在SpringBoot应用程序中遇到此问题，我可以快速重建我的软件包，但这不一定会使服务器查看实际文件夹并实时查找它。所以你需要做的就是有一种方法可以将服务器配置为始终在本地文件夹中查找bundle.js文件，而不是从WAR / JAR或通常从中拉出它的任何地方。这不是“webpack问题”。这是如何直接从文件夹上的bundle.js读取服务器的问题。我会给你Spring的做法，但这不是你的架构。

更智能的webpack捆绑与反应和表达

2 个答案: