0
プロジェクトにHMRを追加するときに問題が発生したのは約1週間前です。問題はそれがうまくいかず、コンソールにHMR Enabledが表示され、HMRのwebpackでbabel-loaderを正しく構成する方法
[HMR] Updated modules:
[HMR] - ./app/src/components/app.jsx
[HMR] App is up to date.
を何もどちらもコードインスペクタで、視覚的に変化しないだろう：ファイルの上に、それが再レンダリングされませんでしたビュー、コンソールがログに記録します。
多くの実験の結果、私はこの問題がバベルローダーによって引き起こされていることを知り、何とかウェブパックのHMRモーターなどに干渉していました。私はbabelローダーのインデックスファイルを除外して解決しましたが、index.jsxファイルでjs機能を使用することができないので、これは最善の方法ではないと私は考えています。私はこの問題を解決するためのより良い方法があるかどうか、おそらく私の設定やwebpacksホットミドルウェアを設定する方法について知りたいと思う。
これは私のWebPACKの構成です：
module.exports = {
resolve: {
extensions: ['*', '.js', '.jsx']
},
entry: [
'webpack-hot-middleware/client', './app/src/index.jsx'
],
output: {
path: path.resolve(__dirname, 'build/js'),
filename: 'bundle.js',
publicPath: '/public'
},
devtool: 'cheap-module-source-map',
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'app/src/'),
exclude: path.resolve(__dirname, 'app/src/index.jsx'),
use: [{
loader: 'babel-loader',
options: {
presets: [
'react-hmre'
],
plugins: [
'transform-object-rest-spread'
]
}
}],
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
そして、これはどのように私のセットアップ私のサーバー内のホットミドルウェアと反応するホット・ローダーです：事前に
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfig = require('./webpack.dev.config')
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}))
app.use(webpackHotMiddleware(compiler))
感謝。