反應熱裝載機配置

Question

我不能得到反應熱裝載機在我的項目中正常工作。當我刷新頁面時，沒有改變。我跟着這個鏈接，它似乎很簡單，但我不知道爲什麼它不工作：

http://gaearon.github.io/react-hot-loader/getstarted/

這裏是我的項目鏈接：

https://github.com/liondancer/ReviewWeb/blob/master/webpack.config.js

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

Answer 1

你似乎已經放置插件部分的模塊部分內

在我的配置它

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; 

Answer 2

嘗試在你的開發模式不使用ExtractTextPlugin，導致這個插件可能與熱裝載機一些問題，我不知道爲什麼，但之後，我改變了正常裝載機無使用ExtractTextPlugin，熱加載程序工作。