0
프로젝트에 HMR을 추가하는 중 약 1 주일 전에 문제가 발생했습니다. 문제가 해결되지 않았고 콘솔에 HMR 사용이 표시되고 변경 사항도 감지되었습니다.HMAC 용 webpack에서 바벨 로더를 올바르게 구성하는 방법
[HMR] Updated modules:
[HMR] - ./app/src/components/app.jsx
[HMR] App is up to date.
을하지만 아무것도 시각적으로 변경하지 않을 것이다, 어느 쪽도 코드 관리자에서 : 파일에, 그러나보기를 다시 렌더링하지 않았다, 콘솔 로그 없을 것입니다.
많은 실험을 거친 끝에 나는이 문제가 바벨 로더에 의해 발생했다는 것을 알았고, 어떻게 든 HMpack 모터 나 그와 비슷한 것들을 방해했다. 나는 바벨 로더에서 색인 파일을 제외시킴으로써 그것을 해결했지만, 지금은 index.jsx 파일에 js 기능을 사용할 수 없기 때문에 이것이 최선의 방법이라고 생각하지 않습니다. 나는이 문제를 해결할 더 좋은 방법이 있는지 알고 싶다. 아마도 내 구성이나 웹팩 핫 미들웨어를 설정하는 방법에있을 것이다.
이 내 웹팩 구성입니다 :
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))
감사합니다.