Javascript 反应热加载程序配置

我无法让react hot loader在我的项目中正常工作。当我刷新页面时，没有任何更改。我遵循了这个链接，看起来很简单，但我不确定为什么它不起作用：

以下是指向我的项目的链接：

webpack.config.js：

var path = require('path')
var webpack = require('webpack');
// var ExtractTextPlugin = require("extract-text-webpack-plugin");

var PORT = 8080
var HOST = 'localhost';

module.exports = {
    entry: [
        "webpack-dev-server/client?http://" + HOST + ":" + PORT,
        "webpack/hot/only-dev-server",  // only prevents reload on syntax errors
        './app/index.js'
    ],
    output: {
        path: './public/js',
        filename: 'main.js',
    },
    // devtool: 'source-map',
    debug: true,
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.jsx$/, loaders: ['react-hot','jsx-loader'], include: path.join(__dirname, 'app') },
            // { test: /\.jsx$/, loaders: 'jsx-loader' },
            // http://babeljs.io/docs/usage/runtime/
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.less$/, exclude: /node_modules/, loader: 'style-loader!css-loader!less-loader'},
            { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' }
            // { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // https://github.com/webpack/extract-text-webpack-plugin#usage-example-with-css
        // new ExtractTextPlugin('style.css', {
        //  allChunks: true
        // })

        // this will look through all your entry points and find any files that are common
        // or find dependencies that are common throughout the node_modules and extract them and 
        // put them into one file called common.js or whatever you want to call it.
        // used to reduce file size when served.
        new webpack.optimize.CommonsChunkPlugin('common.js')
    ]
};

---

您似乎已将插件部分放在模块部分中

在我的配置中

var webpack           = require('webpack');
var path              = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var argv              = require('minimist')(process.argv.slice(2));

var nodeModulesPath   = path.resolve(__dirname, 'node_modules');
var buildPath         = path.resolve(__dirname, 'public', 'build');
var appPath           = path.resolve(__dirname, 'src' );

var env               = argv.env || 'development';

var plugins = [

  new webpack.ProvidePlugin({
    $: 'jquery', jQuery: 'jquery', 'windows.jQuery': 'jquery'
  }),

  new webpack.DefinePlugin({
    ENV : JSON.stringify(env),
    NODE_ENV: JSON.stringify(env)
  }),

  new ExtractTextPlugin('bundle.css', {
    allChunks: true
  }),

  new webpack.HotModuleReplacementPlugin(),

  new webpack.NoErrorsPlugin()
];

var config = {

  entry: [
    'webpack-dev-server/client?http://127.0.0.1:3000',
    'webpack/hot/dev-server',
    path.resolve(appPath, 'app.jsx')
  ],

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  output: {
    path: buildPath,
    filename: 'bundle.js',
    publicPath: 'build/'
  },

  module: {
    loaders: [
      { test: /\.jsx?$/i, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') },
      { test: /\.css$/i,  loader: 'style!css' },
      { test: /\.less$/i, loader:ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')},
      { test: /\.jpe?g($|\?)|\.gif($|\?)|\.png($|\?)|\.svg($|\?)/i, loader: 'file-loader' },
      { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)/i, loader: 'file-loader', query:{ name:'[path][name].[ext]',context:'src/assets' }},
      { test: /\.ico($|\?)/i, loader: 'file-loader', query:{ name:'[path][name].[ext]', context:'src/assets' }},
      { test: /jquery\.js$/, loader: 'expose?$' },
      { test: /jquery\.js$/, loader: 'expose?jQuery' }
   ]
  },

  plugins: plugins,

  devtool: 'source-map'  

};

module.exports = config;

---

尝试在开发模式中不使用ExtractTextPlugin，因为此插件可能与热加载程序有一些问题，我不知道为什么，但在我未使用ExtractTextPlugin而改为普通加载程序后，热加载程序工作了。

您看过吗？