开发服务器不热重载，构建失败

Question

我正在开发 react/redux 应用程序，在 port:3000 上使用 npm-piped hapi.js 后端和 webpack-dev-server 运行在本地提供服务] 在 port:3001;

我有几个 api 返回的路由来提供静态文件，然后我使用 {param*} 规则从我的 build/public 目录中找到资产文件。为了让它工作，我在 WebpackDevServer 上有一个代理将请求转发回 port:3000

我已经 CSSModules 执行了 .scss 的构建，并且还有一些其他加载程序。

当我第一次设置它时，它按预期工作。我可以添加文件、保存内容、执行构建，HMR 会做它的事情，并更新 dom。效果很好。在某些时候，这停止工作得很好。 :3000 上的后端进行重建和重新加载，而 :3001 上的前端收到如下错误：

[HMR] Checking for updates on the server...
bundle.js:26 GET http://localhost:3001/dist/ee2fe9b049ee40ff922c.hot-update.json 404 (Not Found)hotDownloadManifest @ bundle.js:26hotCheck @ bundle.js:245check @ bundle.js:8080(anonymous function) @ bundle.js:8138
bundle.js:8095 [HMR] Cannot find update. Need to do a full reload!
bundle.js:8096 [HMR] (Probably because of restarting the webpack-dev-server)

我注意到那里有对 :8080 的引用（webpack-dev-server 默认值），但我的引用都是对 :3000/1。

当这个堆栈运行良好时 - 我可以保存 server.js 并且 hapi 服务器将自行重启（由于 npm 管道），并且 webpack 构建将按预期进行。目前间歇性地从 server.js 构建失败，我必须手动 $ webpack 并重新加载浏览器以触发构建并成功刷新。这显然是在打败重点。

重要的一点：

server.js

// ... hapi.js settings

// Dev server / HMR
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../webpack.config.js');

if (!isProduction){
  new WebpackDevServer(webpack(config), {
    publicPath: 'dist',
    hot: true,
    historyApiFallback: true,
    proxy: {
      "*": 'http://localhost:3000'
    },
    quiet: false,
    stats: { colors: true }
  }).listen(3001, 'localhost', (err, result) => {
    if (err){
      console.log(err);
    }
    console.log('WebpackDevServer[localhost::3001]');
  });
}

webpack.config.js

// imports
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const validate = require('webpack-validator');
const path = require('path');

// paths
const rootPath = path.resolve(__dirname, 'client', 'src');

// configger the almighty webpack
const config = {
  entry: [
    'webpack-dev-server/client?http://localhost:3001',
    'webpack/hot/only-dev-server',
    path.resolve(rootPath, 'index.jsx')
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: rootPath
  },
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js',
    sourceMapFilename: 'bundle.map'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'react-hot!babel',
        include: rootPath
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'),
        include: rootPath
      }, {
        test: /\.(png|jpg|gif)$/,
        loader: 'file?name=/images/[name].[ext]',
        include: rootPath
      }
    ]
  },
  devtool: '#source-map',
  devServer: {
    contentBase: '/public',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('styles.css')
  ]
};

module.exports = validate(config);

一直在修改所有设置，所以我可能会修改一直有效的设置。但这似乎应该按预期运行。

如能深入了解此配置堆栈，我们将不胜感激。项目来源：github

最佳 -

Answer 1

拜托。有点修补，如果其他人有这个问题。

我修改了 server.js 代码来处理所有开发服务器配置，这意味着如果我在 :3001 上查看站点，保存会执行重建到内存中，并且会提供这些飞起来。哪个好。

据我了解，下面的 WebpackDevServer 配置实际上不会重建新文件（正如 docs 似乎表明的那样）。我仍然需要手动 $ webpack 来实际构建文件。我怀疑这是正确的行为，但如果我正在实时重新加载，那就太好了。我只需要留在 :3001。

server.js

// Dev server / HMR
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../webpack.config.js');
const compiler = webpack(config);

new WebpackDevServer(compiler, {
  port: 3001,
  publicPath: '/dist/',
  contentBase: 'dist/',
  historyApiFallback: true,
  inline: true,
  hot: false,
  quiet: false,
  stats: { colors: true },
  proxy: {
    '*': 'http://localhost:3000'
  }
}).listen(3001, 'localhost', (err, result) => {
  if (err){
    console.log(err);
  }
  console.log('WebpackDevServer[localhost::3001]');
});

webpack.config.js

// imports
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const validate = require('webpack-validator');
const path = require('path');

// paths
const rootPath = path.resolve(__dirname, 'client', 'src');

// configger the almighty webpack
const config = {
  entry: [
    'webpack-dev-server/client?http://localhost:3001',
    'webpack/hot/only-dev-server',
    path.resolve(rootPath, 'index.jsx')
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: rootPath
  },
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js',
    sourceMapFilename: 'bundle.map'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'react-hot!babel',
        include: rootPath
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'),
        include: rootPath
      }, {
        test: /\.(png|jpg|gif)$/,
        loader: 'file?name=/images/[name].[ext]',
        include: rootPath
      }
    ]
  },
  devtool: '#source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('styles.css')
  ]
};

module.exports = validate(config);

Answer 2

您的问题似乎与 HMR 有关，webpack 开发服务器以某种方式接收到文件更改的 'signal'，但随后无法确定要更新的代码部分，因此它会重新加载整个页面。

我使用的配置与您使用的配置略有不同，但乍一看有些不同：

在解析对象中，您在可识别的扩展数组中有“”（空字符串）。那是自愿的吗？告诉我你为什么放那个空字符串，我从来没有见过它，我很好奇:)
8080 引用可能是行号，而不是端口！至少，通过查看以下提到的 js 文件名似乎是这样。
尝试将 webpack 代理配置的 * 替换为另一个正则表达式...这只是一个想法。 Webpack 开发服务器理论上必须能够说：嘿！这个url必须转发到后端。而其他 urls 则不能。我不知道服务器如何解释正则表达式，也许星号太强了，导致配置无法正常工作。
如果你想要 HMR，必须将 hot 设置为 true。

在我的设置中，我没有使用本地主机，而是在 apache 和主机文件中配置了一个虚拟主机。不确定本地主机是否会导致问题，但我已尝试尽可能多地遵循我在文档中看到的内容。

不要认为我的回答 100% 正确，我也是 webpack 的新手，我也遇到了一些问题（几个小时前刚刚上传了一个问题）。无论如何，我希望这会有用。

拜托，你能告诉我你为什么定义前两个入口点吗？我已经看到了谢谢

开发服务器不热重载，构建失败

Dev server not hot-reloading, failing to build

webpack

webpack-dev-server

react-hot-loader

hapi.js