React 和 hmr，为什么 Webpack 会忽略变化？答案

【问题标题】：React and hmr, why Webpack ignores changes?React 和 hmr，为什么 Webpack 会忽略变化？
【发布时间】：2016-04-21 08:53:58
【问题描述】：

我正在尝试使用热模块替换使用 Webpack 构建我的 React 项目。但是，Webpack 会忽略文件更改。我究竟做错了什么？我的配置：

  var path = require('path');
  var webpack = require('webpack');

  module.exports = {
    entry: [
      'webpack-dev-server/client?http://localhost:4567',
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/static/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        include: [path.join(__dirname, 'src')]
      }]
    }
  };

我的文件结构：

src
--app
----actions
----components
----constants
----reducers
----app.js
----config.js
--index.js

如果模块文件位于“src”文件夹中，热模块替换工作正常，否则更改不会发生任何事情。

谢谢！

【问题讨论】：

module.loaders.include 不是“包含路径”，它是条件以及module.loaders.test。因此，js 加载器不会应用于不在src 文件夹中的文件。
删除包含选项不起作用（改为exclude: /node_modules/）
虽然src文件夹中的js文件适用于import Whatever from './whatever.js'，但不适用于src/app/components和import Whatever from './app/components/whatever.js'？
是的，import App from './app' 工作正常，但 import App from './app/app' 不行
nothing 在更改时发生 表示 webpack-dev-server 和浏览器控制台中没有消息？

标签： javascript reactjs webpack webpack-hmr

【解决方案1】：

因为你已经在 webpack 配置中设置了 include。

您可以像这样更改配置： var path = require('path');

  var webpack = require('webpack');

  module.exports = {
    entry: [
      'webpack-dev-server/client?http://localhost:4567',
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/static/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        include: [`all of your dirs you want to watch`]
      }]
    }
  };

【讨论】：

include: [path.join(__dirname, 'src'), path.join(__dirname, 'src/app')] WDS 没有反应
你可以尝试使用排除而不是包含
exclude: /node_modules/ 没有包含选项也不起作用