Webpack Hot Middleware 没有在带有 React 的 Ubuntu 上热重载？答案

【问题标题】：Webpack Hot Middleware not hot-reloading on Ubuntu with React?Webpack Hot Middleware 没有在带有 React 的 Ubuntu 上热重载？
【发布时间】：2017-01-28 09:45:35
【问题描述】：

我遇到了一个非常令人沮丧的问题，我的 webpack-hot-middleware 不是“热重载”。它正在构建项目，并在我对任何有问题的文件进行任何编辑时重新构建项目，但它似乎从未显示任何更改，并且总是在对它们进行编辑之前显示我的文件（几乎就像它正在缓存它们或东西）。

我也在使用 Express 服务器，而且对这一切都很陌生。实际上，我正在尝试使用雇主交给我的文件来设置开发环境，并且很难弄清楚如何解决这个问题。

我的 package.json 运行这些脚本：

"scripts": {
"postinstall": "npm run prod",
"prod": "webpack --config ./webpack.prod.config.js",
"start": "node ./app_build.js"
 }

在“npm install”之后，它似乎运行了这个文件“webpack.prod.config.js”：

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

module.exports = {
  devtool: 'source-map',

  entry: './main.js',

  output: {
    path: path.join(__dirname,'prod'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins:[
      new webpack.DefinePlugin({
          'process.env':{
              NODE_ENV: JSON.stringify('production'),
          }
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress:{
          warnings:false
        }
      }),
      new ExtractTextPlugin('bundle.css'),
      new webpack.IgnorePlugin(/^(buffertools)$/) //Remove deeper dependancy for react-jsonschema-forms error
  ],

  module: {
    loaders: [
      { test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'] }},
      { test: /\.css?$/,
        loader: ExtractTextPlugin.extract('style', 'css')},
      { test: /\.less$/,
        loader: 'style!css!less' },
      { test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=100000' },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/octet-stream"
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file"
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=image/svg+xml"
        }
    ]
  }
};

“npm start”运行“app_build.js”，如下所示：

const Server = require('./server.js');
const port = (process.env.PORT || 3333);
const app = Server.app();
const stormpath = require('express-stormpath');
const path = require('path');
var helpers = require('express-stormpath/lib/helpers');
var uuid = require('node-uuid');
var requestProxy = require('express-request-proxy');
var btoa = require('btoa');
var session = require('express-session');
var request = require('request');
var bodyParser = require('body-parser');
var Mailgun = require('mailgun-js');
request = request.defaults({jar:true});

const CONSTANTS  = require('./src/constants/Constants');


//console.log('version: '+ process.env.NODE_ENV);

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const config = require('./webpack.dev.config.js');
    const compiler = webpack(config);

    app.use(webpackHotMiddleware(compiler));
    app.use(webpackDevMiddleware(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }))
    console.log(`Listening at http://localhost:${port}`);
}

这个文件还有更多内容，但我认为我的问题与我的 publicPath 或其他东西有关，我不完全确定。就像我说的，我是从以前的开发人员那里得到这个配置的，我对这一切都是全新的。

【问题讨论】：

webpack.dev.config.js 长什么样子？

标签： reactjs webpack webpack-hot-middleware hot-module-replacement webpack-dev-middleware

【解决方案1】：

有一个similar issue
在 ubuntu 上试试这个命令。使用后热重载有效：
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

【讨论】：

【解决方案2】：

我发现问题归结为愚蠢的人为错误：我 sudo npm install 安装了我所有的包，我想我只需要执行 sudo npm start为了允许 webpack 访问文件。只是一个普通的“npm start”不会让热重载功能达到预期。

【讨论】：