Webpack 中间件停止监视文件更改答案

【问题标题】：Webpack middleware stopped watching for file-changesWebpack 中间件停止监视文件更改
【发布时间】：2016-06-14 10:27:52
【问题描述】：

我使用 webpack-dev-middleware 和 webpack-hot-middleware 几个月了，它工作得很好，但是现在发生了一些事情，webpack 停止监视文件更改，因此只有在我重新启动应用程序时才会重新构建包。会发生什么？我在使用 fs.inotify.max_user_watches = 524288 设置并调整了 :set backupcopy=yes vim 选项的 arch linux 上。会发生什么？如何找回东西？

初始捆绑发生，中间件正确加载，正如我在日志中看到的那样。这是在入口应用程序中加载 webpack 中间件的行。

(function() {
  if (process.env.NODE_ENV === 'development') {
    console.server('Running webpack middleware...');
    var webpack = require('webpack');
    var webpackConfig = require('../config/webpack.config.js');
    var compiler = webpack(webpackConfig);

    app.use(require("webpack-dev-middleware")(compiler, {
      hot: true,
      noInfo: false,
      stats: {
        colors: true
      },
      historyApiFallback: true,
      publicPath: '',
      contentBase: './app'
    }));

    app.use(require("webpack-hot-middleware")(compiler, {
      log: console.webpack,
      heartbeat: 10 * 1000
    }));
  }
})();

和webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const PATHS = {
  app: {
    client: path.resolve(__dirname, '../app'),
    admin: path.resolve(__dirname, '../admin-app')
  },
  styles: path.resolve(__dirname, '../public/stylesheets'),
  build: path.resolve(__dirname, '../public/build'),
  public: path.resolve(__dirname, '../public')
};

const plugins = [
  // Shared code
  new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
  // Avoid publishing files when compilation fails
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
  }),
  new webpack.optimize.OccurenceOrderPlugin(),
  new ExtractTextPlugin('stylesheet.css')
];

const config = {
  env: process.env.NODE_ENV,
  entry: {
    client: [path.resolve(PATHS.app.client + '/index.js'), 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr'],
    admin: [path.resolve(PATHS.app.admin + '/index.js'), 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr']
  },
  output: {
    path: PATHS.build,
    filename: '[name].bundle.js',
    publicPath: '/'
  },
  stats: {
    colors: true,
    reasons: true
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    alias: {},
    extensions: ['', '.jsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: PATHS.app.client,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.jsx?$/,
        include: PATHS.app.admin,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader'])
      }
    ]
  },
  plugins: plugins,
  devtool: 'eval'
};

module.exports = config;

【问题讨论】：

标签： node.js express webpack webpack-hmr webpack-hot-middleware

【解决方案1】：

Lol 只是 console.webpack 函数中的一个愚蠢的错字，它传递给 webpack-hot-middleware log 并没有让它工作。滚动到 webpack 提供的巨大日志输出的最顶部时看到错误，这使得这个错字非常隐蔽。

【讨论】：