javascript - 如果文件导入命名导出，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 will include a script in your bundle that connects to a WebSocket to reload when a change in any of your files occurs. The --public flag makes sure the script knows where to look for the WebSocket. The server will use port 8080 by default, so we should also specify that here.

--watch-poll makes sure that webpack can detect changes in your files. By default webpack listens to events triggered by the filesystem, but VirtualBox has many problems with this.

看起来 VirtualBox 并不是唯一有此问题的东西......

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