webpack hot reaload react

Question

私はこれについて多くの質問があることを知っていますが、私は2日間で14時間の解決策を探しています。

私は自分のために開発環境を構築しようとしていますが、熱い自動更新では運がありません。

webpack.configエントリポイントを'webpack/hot/dev-server'に変更しました。私がブラウザにサイトに入るときhttp://localhost:3000/私はサイトを持っていた。コンソールでは、それは言う：[HMR] Waiting for update signal from WDS...しかし、私は何かを更新すると、ページがリロードされません。何も起こりません。 webpackが変更をキャッチしてバンドルを更新するのがわかります。私はF5を使ってページをリロードするときに変更を見ることができます。

私がhttp://localhost/webpack-dev-server/と入力すると、変更を加えるたびにページが更新されます。しかし、それは全面リロードを行います。

私は多分それは簡単な解決策ですが、私は14時間この解決策を見つけることを試みてきたと私は信じています。私は髪を引っ張っている。

すべての私の構成は、このようなものです：

package.json

{ 
    "name": "sample", 
    "version": "0.1.0", 
    "description": "sample", 
    "private": true, 
    "main": "index.js", 
    "scripts": { 
    "start": "cross-env NODE_ENV=development webpack-dev-server --config=./webpack.config.dev.js", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Gökhan Öztürk", 
    "license": "ISC", 
    "devDependencies": { 
    "autoprefixer": "^6.7.0", 
    "babel-core": "^6.22.1", 
    "babel-eslint": "^7.1.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-add-module-exports": "^0.2.1", 
    "babel-plugin-dev-expression": "^0.2.1", 
    "babel-plugin-tcomb": "^0.3.24", 
    "babel-plugin-webpack-loaders": "^0.8.0", 
    "babel-polyfill": "^6.22.0", 
    "babel-preset-env": "^1.1.8", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-react-app": "^2.0.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-react-optimize": "^1.0.1", 
    "babel-preset-stage-0": "^6.22.0", 
    "cross-env": "^3.1.4", 
    "css-loader": "^0.26.1", 
    "eslint": "^3.14.0", 
    "eslint-config-airbnb": "^14.0.0", 
    "eslint-formatter-pretty": "^1.1.0", 
    "eslint-import-resolver-webpack": "^0.8.1", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-flowtype": "^2.30.0", 
    "eslint-plugin-flowtype-errors": "^2.0.3", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-plugin-jsx-a11y": "^3.0.2", 
    "eslint-plugin-promise": "^3.4.0", 
    "eslint-plugin-react": "^6.9.0", 
    "express": "^4.14.0", 
    "file-loader": "^0.9.0", 
    "flow-bin": "^0.38.0", 
    "flow-typed": "^2.0.0", 
    "html-webpack-plugin": "^2.26.0", 
    "json-loader": "^0.5.4", 
    "node-sass": "^4.3.0", 
    "postcss-loader": "^1.2.2", 
    "react-hot-loader": "^1.3.1", 
    "redux-logger": "^2.7.4", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "tcomb": "^3.2.16", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.14.0", 
    "webpack-dev-middleware": "^1.9.0", 
    "webpack-dev-server": "^1.16.2", 
    "webpack-hot-middleware": "^2.15.0" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.2", 
    "react-router": "^3.0.2", 
    "react-router-redux": "^4.0.7", 
    "redux": "^3.6.0", 
    "redux-thunk": "^2.2.0" 
    } 
} 

webpack.config.dev.js

const path = require('path'); 
const fs = require('fs'); 
const webpack = require('webpack'); 
const autoprefixer = require('autoprefixer'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const appDirectory = fs.realpathSync(process.cwd()); 
function resolveApp(relativePath) { 
    return path.resolve(appDirectory, relativePath); 
} 

module.exports = { 
    debug: true, 

    devtool: 'inline-sourcemap', 

    entry: [ 
    'webpack-hot-middleware/client?http://localhost:3000/', 
    'webpack/hot/only-dev-server', 
    'babel-polyfill', 
    './src/index' 
    ], 

    output: { 
    path: resolveApp('build'), 
    pathinfo: true, 
    filename: 'static/js/bundle.js', 
    publicPath: 'http://localhost:3000/' 
    }, 

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

    module: { 
    // First, run the linter. 
    // It's important to do this before Babel processes the JS. 
    preLoaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'eslint', 
     include: resolveApp('src'), 
     } 
    ], 
    loaders: [ 
     // Diğer loaderlar tarafından işlem görmeyecek her dosya buradan yönlendirilecek. 
     { 
     exclude: [ 
      /\.html$/, 
      /\.(js|jsx)$/, 
      /\.css$/, 
      /\.(scss|sass)$/, 
      /\.json$/, 
      /\.svg$/ 
     ], 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     }, 

     { 
     test: /\.css$/, 
     loader: 'style!css?importLoaders=1!postcss' 
     }, 
     { 
     test: /\.(scss|sass)$/, 
     loader: 'style!css?importLoaders=1!postcss!sass' 
     }, 
     // JSON is not enabled by default in Webpack but both Node and Browserify 
     // allow it implicitly so we also enable it. 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'react-hot!babel', 
     // loader: 'babel?cacheDirectory=true', 
     include: resolveApp('src'), 
     exclude: /node_modules/ 
     } 
    ] 
    }, 

    // We use PostCSS for autoprefixing only. 
    postcss: function postCssAutoprefixer() { 
    return [ 
     autoprefixer({ 
     browsers: [ 
      '>1%', 
      'last 4 versions', 
      'Firefox ESR', 
      'not ie < 9', // React doesn't support IE8 anyway 
     ] 
     }), 
    ]; 
    }, 

    plugins: [ 
    // Generates an `index.html` file with the <script> injected. 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: resolveApp('public/index.html'), 
    }), 

    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 

    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development') 
    }) 
    ], 

    devServer: { 
    hot: true, 
    contentBase: './src', 
    port: 3000 
    }, 

    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty' 
    } 
}; 

.babelrc

{ 
    "presets": [ 
    "react", 
    "es2015" 
    ], 
    "plugins": ["add-module-exports"], 
    "env": { 
    "production": { 
     "presets": ["react-optimize"], 
     "plugins": ["babel-plugin-dev-expression"] 
    }, 
    "development": { 
     "plugins": [ 
     "transform-class-properties", 
     "transform-es2015-classes", 
     "tcomb" 
     ], 
     "presets": ["react-hmre"] 
    } 
    } 
} 

公共/ index.htmlを

<!doctype html> 
<html lang="tr"> 
    <head> 
    <title>site</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    <div id="root"></div> 
    </body> 
</html> 

Answer 1

実施例に見てみましょう：

main.js

const express = require('express') 
const debug = require('debug')('app:server') 
const path = require('path') 
const webpack = require('webpack') 
const webpackConfig = require('../config/webpack.config') 
const project = require('../config/project.config') 
const compress = require('compression') 

const app = express() 

// Apply gzip compression 
app.use(compress()) 

// ------------------------------------ 
// Apply Webpack HMR Middleware 
// ------------------------------------ 
if (project.env === 'development') { 
    const compiler = webpack(webpackConfig) 

    debug('Enabling webpack dev and HMR middleware') 
    app.use(require('webpack-dev-middleware')(compiler, { 
    publicPath : webpackConfig.output.publicPath, 
    contentBase : project.paths.client(), 
    hot   : true, 
    quiet  : project.compiler_quiet, 
    noInfo  : project.compiler_quiet, 
    lazy  : false, 
    stats  : project.compiler_stats 
    })) 
    app.use(require('webpack-hot-middleware')(compiler, { 
    path: '/__webpack_hmr' 
    })) 

    // Serve static assets from ~/public since Webpack is unaware of 
    // these files. This middleware doesn't need to be enabled outside 
    // of development since this directory will be copied into ~/dist 
    // when the application is compiled. 
    app.use(express.static(project.paths.public())) 

    // This rewrites all routes requests to the root /index.html file 
    // (ignoring file requests). If you want to implement universal 
    // rendering, you'll want to remove this middleware. 
    app.use('*', function (req, res, next) { 
    const filename = path.join(compiler.outputPath, 'index.html') 
    compiler.outputFileSystem.readFile(filename, (err, result) => { 
     if (err) { 
     return next(err) 
     } 
     res.set('content-type', 'text/html') 
     res.send(result) 
     res.end() 
    }) 
    }) 
} else { 
    debug(
    'Server is being run outside of live development mode, meaning it will ' + 
    'only serve the compiled application bundle in ~/dist. Generally you ' + 
    'do not need an application server for this and can instead use a web ' + 
    'server such as nginx to serve your static files. See the "deployment" ' + 
    'section in the README for more information on deployment strategies.' 
) 

    // Serving ~/dist by default. Ideally these files should be served by 
    // the web server and not the app server, but this helps to demo the 
    // server in production. 
    app.use(express.static(project.paths.dist())) 
} 

module.exports = app 

DEV-server.js

const project = require('../config/project.config') 
const server = require('../server/main') 
const debug = require('debug')('app:bin:dev-server') 

server.listen(project.server_port) 
debug(`Server is now running at http://localhost:${project.server_port}.`) 

project.config.js

// ---------------------------------- 
    // Server Configuration 
    // ---------------------------------- 
    server_host : ip.address(), 
    server_port : process.env.PORT || 1024,