0

私はreact/reduxアプリに取り組んでおり、ポート：3000でnpmパイプされたhapi.jsバックエンドとポート：3001で実行されているwebpack-dev-serverでローカルに提供されています。

静的ファイルを提供するための API ルートがいくつかあり、{param*} ルールを使用して build/public ディレクトリからアセット ファイルをヒットします。それを機能させるために、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ています。ビルドと正常な更新をトリガーするには、ブラウザーを手動でリロードする必要があります。これは明らかにポイントを打ち負かしています。

重要なビット:

サーバー.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

一番 -

4

2 に答える 2

0

ああ。他の誰かがこの問題を抱えている場合、少しいじくり回します。

すべての開発サーバー構成を処理するように server.js コードを変更しました。つまり、 でサイトを表示すると:3001、保存によってメモリへの再構築が実行され、その場で提供されます。どっちがいい。

私が理解しているように、以下の WebpackDevServer 構成は実際には新しいファイルを再構築しません (ドキュメントが示すように)。$ webpack実際にファイルをビルドするには、まだ手動で行う必要があります。これが正しい動作だとは思えませんが、ライブ リロードが行われているのであれば、それはかなり良いことです。私はただ滞在しなければなりません:3001。

サーバー.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);
于 2016-06-25T18:03:14.670 に答える
0

あなたの問題はHMRに関連しているようです。どういうわけか、webpack devサーバーはファイル変更の「シグナル」を受け取りますが、コードのどの部分を更新するかを判断できないため、ページ全体をリロードします。

私はあなたが使用しているものとはわずかに異なる構成を使用していますが、一見するといくつかのオッズがあります。

  • 解決オブジェクトでは、認識された拡張子の配列に '' (空の文字列) があります。それは自発的ですか？空の文字列を配置した理由を教えてください。見たことがないので、興味があります :)

  • 8080 参照は、おそらくポートではなく回線番号です! 少なくとも、次の js ファイル名の言及を見るとそのように思えます。

  • webpack プロキシ構成の * を別の正規表現に置き換えてみてください...これは単なるアイデアです。Webpack dev サーバーは、理論的に言うことができる必要があります。この URL をバックエンドに転送する必要があります。他の URL は許可されません。サーバーが正規表現をどのように解釈するのかわかりません。おそらく、アスタリスクがルールとして強すぎて、構成が正しく機能しない可能性があります。

  • HMR が必要な場合は、hot を true に設定する必要があります。

ローカル ホストを使用する代わりにセットアップで、Apache とホスト ファイルで vhost を構成しました。ローカル ホストが問題を引き起こす可能性があるかどうかはわかりませんが、ドキュメントに記載されている内容に可能な限り従ってみました。

私の答えが100％正しいとは思わないでください。私もwebpackを初めて使用し、いくつかの問題に悩まされています（数時間前に質問をアップロードしたばかりです）。とにかくこれが役に立つことを願っています。

最初の 2 つのエントリ ポイントを定義した理由を教えてください。私はすでにそれを見ました ありがとう

于 2019-07-12T13:26:50.353 に答える