は後に変更realoadingないホットローダーに反応

Question

I以下webpack.config.jsあります

"use strict"; 

const debug = process.env.NODE_ENV !== "production"; 

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

module.exports = { 
    devtool: debug ? 'inline-sourcemap' : null, 
    devServer: { 
    inline: true, 
    port: 3333, 
    hot: true, 
    contentBase: "src/static/", 
    historyApiFallback: { 
     index: '/index-static.html' 
    } 
    }, 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000/', 
    'webpack/hot/only-dev-server', 
    './src/app-client.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'src', 'static', 'js'), 
    publicPath: "/js/", 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: path.join(__dirname, 'src'), 
     loader: ['babel-loader'], 
     query: { 
     cacheDirectory: 'babel_cache', 
     presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015'] 
     } 
    }, 
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') } 
    ] 
    }, 
    plugins: debug ? [] : [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     mangle: true, 
     sourcemap: false, 
     beautify: false, 
     dead_code: true 
    }), 
    ] 
}; 

package.json

{ 
    "name": "judo-heroes", 
    "version": "1.0.0", 
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.", 
    "main": "src/server.js", 
    "repository": "git@github.com:lmammino/judo-heroes.git", 
    "scripts": { 
    "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js", 
    "start-dev": "npm run start-dev-hmr", 
    "start-dev-single-page": "node_modules/.bin/http-server src/static", 
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot", 
    "build": "NODE_ENV=development node_modules/.bin/webpack -d" 
    }, 
    "author": "Luciano Mammino", 
    "license": "MIT", 
    "dependencies": { 
    "babel-cli": "^6.11.4", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "ejs": "^2.5.1", 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-router": "^2.6.1" 
    }, 
    "devDependencies": { 
    "http-server": "^0.9.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

は私が作るたびにリフレッシュするために、ブラウザを取得しようとしています一部のコンポーネントが変更されますが、変更は行われません。

Answer 1

あなたの問題はおそらく、最初のローダーが一致してからtest: /\.jsx?$/,というテストでローダーに到着しないことでしょう。

最初のモジュールにreact-hotを使用できますか？

{ 
    test: path.join(__dirname, 'src'), 
    loader: ['react-hot','babel-loader'], 
    query: { 
    cacheDirectory: 'babel_cache', 
    presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015'] 
    } 
}, 

このローダーのより正確なテストは、長期的にはより良いでしょう。

Answer 2

私は単純に、このコマンドを実行する必要がありました：

"スタート-DEV-HMR"： "node_modules/.binファイル/ WebPACKの-devのサーバー--progress --inline --hot"、

{ 
    "name": "judo-heroes", 
    "version": "1.0.0", 
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.", 
    "main": "src/server.js", 
    "repository": "git@github.com:lmammino/judo-heroes.git", 
    "scripts": { 
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js", 
    "start-dev": "npm run start-dev-hmr", 
    "start-dev-single-page": "node_modules/.bin/http-server src/static", 
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot", 
    "build": "NODE_ENV=production node_modules/.bin/webpack -p" 
    }, 
    "author": "Luciano Mammino", 
    "license": "MIT", 
    "dependencies": { 
    "babel-cli": "^6.11.4", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "ejs": "^2.5.1", 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-router": "^2.6.1" 
    }, 
    "devDependencies": { 
    "http-server": "^0.9.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.14.1" 
    } 
}