开发服务器未热重载，无法构建

Question

我正在开发一个 react/redux 应用程序，在本地使用 npm-piped hapi.js 后端在端口：3000 上提供服务，并在端口：3001 上运行 webpack-dev-server；

我有几个 api 路由返回以提供静态文件，然后我使用 {param*} 规则将资产文件从我的构建/公共目录中删除。为了使它工作，我在 WebpackDevServer 上有一个代理，它将请求转发回端口：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 开发服务器以某种方式接收到文件更改的“信号”，但随后无法确定要更新的代码部分，因此它重新加载了整个页面。

我使用的配置与您使用的配置略有不同，但乍一看还是有一些可能性：

• 在解析对象中，可识别的扩展数组中有 ''（空字符串）。这是自愿的吗？告诉我你为什么放那个空字符串，我从来没见过，我很好奇:)

• 8080 引用可能是行号，而不是端口！至少，通过查看以下提到的 js 文件名似乎是这样的。

• 尝试将 webpack 代理配置的 * 替换为另一个正则表达式...这只是一个想法。 Webpack 开发服务器理论上必须能够说：嘿！此 url 必须转发到后端。而其他网址则不能。我不知道服务器如何解释正则表达式，也许星号太强了，导致配置无法正常工作。

• 如果您想要 HMR，则必须将 hot 设置为 true。

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

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

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