webpack-dev-server 不会 watch/recompile 文件如果他们导入命名导出

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 一切都可以编译并且工作正常，但是如果我 modify/save app/scenes/ControlPanel/index.js webpack-dev-server 不会更新。如果我保存 app/index.js 它会正确重新编译，但它不会对其他文件执行任何操作。

我有：

Ubuntu16.04
Node.js 4.2.6
webpack-开发服务器 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.

导入

结束

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

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 似乎解决了基于事件的观看失败时与 OS 相关的问题。

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

webpack-dev-server 不会 watch/recompile 文件如果他们导入命名导出

webpack-dev-server doesn't watch/recompile files if they import named exports

javascript

watch

webpack

webpack-dev-server

问题

原因

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

结束

tl;博士

说明