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

问题

Problem

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(),
    ],
};

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.

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.

I have:

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

The cause

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';

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?

Workaround (where real madness starts)

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.

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 End

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.

回答1:

tl;dr

Use polling to watch your files.

Example for package.json:

"scripts": {
    "dev": "webpack-dev-server --watch-poll",
}

Example for webpack.config.js:

watchOptions: {
    aggregateTimeout: 300,
    poll: 1000, // How often check for changes (in milliseconds)
},

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.

The webpack documentation on working with Vagrant says:

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.

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

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.

来源：https://stackoverflow.com/questions/42584315/webpack-dev-server-doesnt-watch-recompile-files-if-they-import-named-exports

标签

javascript

Webpack

watch

webpack-dev-server