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

Question

问题

这是我见过的最疯狂的 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，它又可以工作了。通常...当然，如果该文件也导入了命名导出，那么它将无法正常工作。

更疯狂的是，如果我从我的一个自定义文件中导入命名导出，它会起作用，所以它只讨厌从 node_modules 导入。

结束

最重要的是我等了一天才发布这个问题。今天我打开我的电脑，没有任何效果。它没有检测到任何变化。自上次工作以来，我没有修改过一个字符。

Answer 1

tl;博士

使用轮询来查看您的文件。

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 事件。