Webpack 开发服务器重新加载在虚拟盒子上不起作用

Question

我正在使用 Ubuntu 15.10 在 mac OSX 上使用 vagrant 在虚拟机上运行 webpack 服务器。

webpack 配置非常干净：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

var MINIFY = process.env.MINIFY === true;

var FRONTEND_ROOT = './static'
var SRC_PATCH = FRONTEND_ROOT + '/scripts';
var BUILD_PATH = './dist';


module.exports = {
  entry: SRC_PATCH + '/main.js',
  devtool: 'source-map',
  output: {
      path: BUILD_PATH,
      filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [SRC_PATCH, 'node_modules']
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(FRONTEND_ROOT, 'index-template.html'),
      minify: MINIFY
    })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx|js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  eslint: {
    configFile: './.eslintrc'
  }
};

Webpack 在 VM 上运行：

vagrant@vagrant-ubuntu-wily-64:/vagrant$ webpack-dev-server --port 8080 --devtool eval --progress --colors --hot --content-base dist 当我从 OSX 编辑文件时，它不会重新加载，但如果我从 VM 编辑相同的文件，它会重新加载。

问题是什么？我该如何解决它？

Answer 1

我已经用 Vagrant 解决了我的问题

rsync-auto

。

我添加了这一行：

config.vm.synced_folder ".", "/vagrant", type: "rsync", rsync_auto: true, rsync_exclude: ".git/" 到我的

Vagrantfile

，并在单独的选项卡中运行 

vagrant rsync-auto

。

Answer 2

这在另一个问题下得到了回答：

https://stackoverflow.com/a/34937378/5114

如果添加

--watch-poll

 选项，它会更改 webpack 查找文件更改的方式。 

webpack-dev-server --watch-poll --port 8080 --devtool eval --progress --colors --hot --content-base dist 这使得 webpack 每 N 毫秒轮询一次文件的更改。轮询在 Vagrant 共享目录中起作用，而普通方法则不起作用，因为它不查找 mtime 或其他文件系统属性，只是按时间间隔读取文件。它速度较慢并且使用更多的 cpu/内存，因此除非必要，否则不要使用轮询。

https://webpack.github.io/docs/cli.html#watch

Answer 3

长话短说：对主机系统 (MacOS) 上的文件所做的任何更改都不会作为事件传播到来宾框

synced_folder

。

因此依赖文件系统事件的功能，如 Webpack 的“热重载”(

webpack-hot-middleware

)、nodemon 的 

--watch

 选项等将无法工作。

根本原因是，VirtualBox

决定不实现inotify

。
引用：

原因是主机和来宾可能具有不同的文件系统，并且

vboxsf

必须实现通用协议以将该信息从主机转发到来宾。这必须在许多不同的主机/客户组合之间起作用。因此，将此票标记为“无法修复”，抱歉。

解决方法是使用

rsync

，如 Maxim Shepelin 的

这个答案中所述。

Answer 4

您需要查看的第一件事是在运行服务器的控制台中，重新编译的过程是否正在发生。如果不是，答案就在 @maxim-schepelin 上面所说的 SyncFolder 行中。如果重新编译并且网页没有重新加载，可能是 webPack 解决方案。

编辑

文件夹同步无法正常工作的另一个原因可能是这样的

https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers