Webpack、React、Babel、React Hot Loaderの最新版を利用した最小限のプロジェクトを設定しようとしました。 私はhereと同じ問題があります。ただし、唯一の違いはbabel-preset-es2015
の代わりに(上記のものの横にある)babel-preset-env
を使用していることです。この修正は私には当てはまりません。リアクションホットローダーは動作しているようですが、更新しません。 [babel-preset-env]
要約:すべてが動作し、React Hot Loaderは変更を検出しますが、コンポーネントは再レンダリングされず、変更はWebサイトに適用されません。
You can find the complete project here.(ヤーンインストール/糸始動が開始されるはずです)testString
を/components/App.js
に変更してファイルを保存することで、この現象を再現できます。
私は間違っていますか?
webpack.config.js .babelrc
var webpack = require('webpack')
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
}
]
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
{
"presets": [
"react",
[ "env", {
"targets": {
"browsers": "> 10%"
}
}]
],
"plugins": ["react-hot-loader/babel"]
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('app'),
)
}
render(App)
if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App',() => { render(NextApp) })
}
package.json
{
"name": "minimal-react",
"version": "0.1.0",
"description": "minimal react",
"main": "index.js",
"repository": "https://github.com/PeterKey/minimal-react.git",
"dependencies": {
"path": "^0.12.7",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"react-hot-loader": "^3.1.3"
},
"scripts": {
"start": "webpack-dev-server --progress --colors --config ./webpack.config.js"
}
}