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

原因

让我们删除下面的导入（唯一导入名为exports的导入，也就是使用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，其中一个建议是使用{ {1}}这似乎可以解决基于事件观看失败时与操作系统相关的问题。

webpack documentation on working with Vagrant说：

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

8080确保webpack可以检测到文件中的更改。默认情况下，webpack侦听由文件系统触发的事件，但VirtualBox在此方面存在许多问题。

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

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

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

问题

原因

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

结束

1 个答案:

TL;博士

说明