关于webpack在docker容器内监听文件更改

我的环境

• 宿主机 Windows 10
• docker 容器 Ubuntu
• webpack
• 数据共享方式： 将宿主机的目录直接映射到容器内
• 工作模式：在容器内启动 webpack 服务监听，在宿主机上编辑文件

---

遇到的坑...

• 容器内的 webpack 监听不到宿主机对文件的修改，很伤
• 爬坑....

---

• 找到了这个 docker容器内webpack热更新的问题
• 然后找到了这个Issues 在docker容器内运行webpack-dev-server，源文件的更改不会被webpack接收到
• 还在webpack文档的Watch选项最后看到了这句话If watching does not work for you, try out this option. Watching does not work with NFS and machines in VirtualBox.

那么，现在大概清晰了。这就是webpack跨文件系统监听上的一个BUG。需要用watch的事件轮询方法去监听文件是否有变化。(⊙o⊙)…，好坑啊。

---

解决

• 使用dev-server时， 在webpack.config.js添加选项官档参考链接

  devServer: {
    historyApiFallback: true,
    noInfo: false,
    host: '0.0.0.0',
    port: 8080
  },
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 500
  },

• 在webpack-dev-middleware 的options中加入watchOptions选项官档参考链接

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true,
  stats: {
      colors: true,
      chunks: false
  },
  watchOptions: {
      aggregateTimeout: 300,
      poll: true
  }
})

---