React和hmr,为什么Webpack忽略了变化?

时间:2016-04-21 08:53:58

标签: javascript reactjs webpack webpack-hmr

我正在尝试使用热模块替换来使用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”文件夹中,则热模块更换工作正常,否则更改时不会发生任何事情。

谢谢!

1 个答案:

答案 0 :(得分:0)

因为您已在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`]
      }]
    }
  };