javascript - 如果webpack-dev-server导入命名的导出文件，则它们不会监视/重新编译文件

问题

这是我见过的最疯狂的webpack问题。您不想知道调试发现问题所花费的时间。我有一个非常基本的webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'app/index.js'),
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'boundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
};

然后，我在app/index.js中导入一些文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import ControlPanel from './scenes/ControlPanel/index.js';
// This last file can be empty. Just import a custom file.

如果我运行./node_modules/.bin/webpack-dev-server，所有内容都可以编译并正常工作，但是如果我修改/保存app/scenes/ControlPanel/index.js，则webpack-dev-server不会更新。如果我保存app/index.js，它将正确重新编译，但不会对其他文件执行任何操作。

我有：

Ubuntu 16.04
Node.js 4.2.6
webpack-dev-server 2.4.1

原因

让我们删除下面的导入（唯一导入命名导出的导入，也使用import { ... }语法）。

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

现在一切正常。如果保存app/scenes/ControlPanel/index.js，它将成功重新编译。什么？为什么？为什么在我启动webpack-dev-server时只能第一次编译？为什么webpack-dev-server的语法有问题？

解决方法（开始真正疯狂的地方）

我发现了一种解决方法（至少）使开发成为可能。您不会相信的：如果我删除app/index.js的全部内容，点击保存几次，然后撤消删除以恢复到原始状态，然后再次点击保存几次，那么我转到保存app/scenes/ControlPanel/index.js，它将再次起作用。通常...当然，如果该文件导入也命名为export，则它将无法正常工作。

更疯狂的是，如果我从一个自定义文件中导入命名的导出文件，它就可以工作，因此它只讨厌来自node_modules的导入。

结束

最重要的是，我等了一天来发布这个问题。今天我打开电脑，什么都没用。它不会检测到任何更改。自上次工作以来，我还没有修改过一个字符。

最佳答案

tl; dr

使用轮询来查看文件。

package.json的示例：

"scripts": {
    "dev": "webpack-dev-server --watch-poll",
}

webpack.config.js的示例：

watchOptions: {
    aggregateTimeout: 300,
    poll: 1000, // How often check for changes (in milliseconds)
},

说明

我仍然不知道--watch-poll解决方案之前发生了什么，因为它有时可以工作，有时却不能，但是在它完全停止工作之后，我found this GitHub issue about WDR not watching并且建议之一是使用似乎可以解决问题的--watch-poll基于事件的观看失败时与操作系统相关的信息。

webpack documentation on working with Vagrant说：

  webpack-dev-server将在您的捆绑软件中包含一个脚本，该脚本将连接到WebSocket以在任何文件发生更改时重新加载。 --public标志可确保脚本知道在何处查找WebSocket。服务器默认使用端口8080，因此我们也应在此处指定端口。

  --watch-poll确保webpack可以检测文件中的更改。默认情况下，webpack侦听文件系统触发的事件，但是VirtualBox对此存在很多问题。

似乎VirtualBox并不是唯一有问题的东西...

Polling使用采样，因此它在给定的时间间隔内不时检查更改。就像使用setInterval监视输入字段中的更改，而不是侦听onchange事件。

关于javascript - 如果webpack-dev-server导入命名的导出文件，则它们不会监视/重新编译文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42584315/

Webpack

javascript - 如果webpack-dev-server导入命名的导出文件，则它们不会监视/重新编译文件