我的環(huán)境

• 宿主機(jī) Windows 10
• docker 容器 Ubuntu
• webpack
• 數(shù)據(jù)共享方式： 將宿主機(jī)的目錄直接映射到容器內(nèi)
• 工作模式：在容器內(nèi)啟動 webpack 服務(wù)監(jiān)聽，在宿主機(jī)上編輯文件

遇到的坑...

• 容器內(nèi)的 webpack 監(jiān)聽不到宿主機(jī)對文件的修改，很傷
• 爬坑....

• 找到了這個 docker容器內(nèi)webpack熱更新的問題
• 然后找到了這個Issues 在docker容器內(nèi)運行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.

那么，現(xiàn)在大概清晰了。這就是webpack跨文件系統(tǒng)監(jiān)聽上的一個BUG。需要用watch的事件輪詢方法去監(jiān)聽文件是否有變化。(⊙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
  }
})