如果文件导入命名导出，webpack-dev-server 不会监视/重新编译文件 [英] webpack-dev-server doesn't watch/recompile files if they import named exports

问题描述

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

This is the craziest webpack issue I ever saw. You don't want to know the amount of time debugging took to find the problem. I have a pretty basic 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中导入几个文件:

Then I import a few files in 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 它会重新编译正确，但它不会对另一个文件做任何事情.

If I run ./node_modules/.bin/webpack-dev-server everything compiles and works fine, but if I modify/save app/scenes/ControlPanel/index.js webpack-dev-server doesn't update. If I save app/index.js it recompile properly but it doesn't do anything for the other file.

我有:

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

让我们删除下面的导入(唯一导入命名导出的导入，也就是使用 import { ... } 语法).

Lets remove the imports below (the only ones that import named exports, aka use the import { ... } syntax).

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

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

Now everything works fine again. If I save app/scenes/ControlPanel/index.js it recompile successfully. What? Why? Why was it able to compile only for the first time when I start webpack-dev-server? Why webpack-dev-server has a problem with this syntax?

我找到了一种(至少)使开发成为可能的解决方法.你不会相信:如果我删除 app/index.js 的全部内容，点击保存几次，然后撤消删除回到原始状态并点击保存再重复几次，然后我去保存 app/scenes/ControlPanel/index.js，它又工作了.通常...当然，如果该文件也导入了名为导出的文件，那么它就行不通了.

I found a workaround that (at least) makes development possible. You aren't gonna believe it: If I delete the whole content of app/index.js, hit save a couple of times, then undo the deletion to get back to the original state and hit save a couple of times again, then I go to save app/scenes/ControlPanel/index.js, it works again. Usually... Of course if that file imports named exports too then it won't work.

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

What is even more crazy is that if I import named exports from one of my custom files, it works, so it only hates imports from node_modules.

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

The cherry on top is that I waited a day to post this question. Today I turned on my PC and nothing works. It doesn't detect any changes. I haven't modified a single character since the last time it worked.

推荐答案

tl;dr

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

tl;dr

Use polling to watch your files.

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 解决方案之前发生了什么，因为它有时有效，有时无效，但在它完全停止工作后我 发现这个关于 WDR 不观看的 GitHub 问题，其中一个建议是使用 --watch-poll 似乎解决了基于事件观看失败时与操作系统相关的问题.

Explanation

I still have no idea what was going on before the --watch-poll solution, because it sometimes worked, sometimes not, but after it completely stopped working I found this GitHub issue about WDR not watching and one of the suggestions was to use --watch-poll that seems to fix problems related to the OS when watching based on events fails.

有关使用 Vagrant 的 webpack 文档 说:

webpack-dev-server 将在您的包中包含一个脚本，该脚本连接到 WebSocket 以在您的任何文件发生更改时重新加载.--public 标志确保脚本知道在哪里寻找 WebSocket.服务器默认使用端口8080，所以我们也应该在这里指定.

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 确保 webpack 可以检测到文件中的更改.默认情况下，webpack 会监听文件系统触发的事件，但是 VirtualBox 在这方面有很多问题.

--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 不是唯一有问题的东西...

Seems like VirtualBox isn't the only thing that has problems with this...

Polling 使用抽样，因此它会不时检查给定的间隔.这就像使用 setInterval 来观察输入字段的变化，而不是监听 onchange 事件.

Polling uses sampling, so it checks for changes from time to time in a given interval. It is like using setInterval to watch for a change in an input field instead of listening on the onchange event.

这篇关于如果文件导入命名导出，webpack-dev-server 不会监视/重新编译文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！