编辑

Question

我在Ubuntu 15.10上使用vagrant over mac OSX在虚拟机上运行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

我用流浪汉rsync-auto解决了我的问题 https://docs.vagrantup.com/v2/cli/rsync-auto.html

我已将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

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

编辑

文件夹同步无法正常运行的另一个原因可能是https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

Answer 4

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

因此依赖于文件系统事件的功能（例如Webpack的“热重载”（webpack-hot-middleware），nodemon的--watch选项等将无法正常工作。

根本原因是，VirtualBox有decided尚未实现inotify。引用：

原因是主机和来宾可能具有不同的文件系统，vboxsf必须实现通用协议才能将该信息从主机转发到来宾。这将必须在许多不同的主机/来宾组合之间工作。因此，抱歉，将此票证标记为“无法解决”。

解决方法是使用Maxim Shepelin的this answer中描述的rsync。

Webpack dev服务器重新加载不能在虚拟框

4 个答案:

编辑