Question

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

我有几个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代码以处理所有dev服务器配置，现在这意味着如果我在: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开发服务器必须在理论上能够说：嘿！该网址必须转发到后端。而其他网址则不能。我不知道服务器如何解释正则表达式，也许星号作为规则太强了，并且使配置无法正常工作。
hot设置为true。

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

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

请，您能告诉我为什么要定义前两个入口点吗？我已经看过了谢谢

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

2 个答案: