0
初めてwebpackと関連するもので微妙に変化する。私はwebpack-dev-serverとbrowser-syncの利点を組み合わせて、ブラウザコンポーネントが更新されたときにブラウザがリロードしないようにするため、単にホットモジュールの置き換えを使用します。私は推測することができる定型文がたくさんありますが、私は最初から始めています。React - webpack hmr
HMRがオンで変更をリッスンしている時点までのIM。私はコンポーネントを編集し、変更を受け取り、Appが最新であると言います。しかし、ビューは数秒後に私はWebソケットのエラーを取得する変更されません。 
それは基本的にウェブソケットエラーが言うそれを読み取ることは困難である場合は、ソケットがハンドシェイクを完了する前に閉じ...
私のWebPACKの設定
const webpack = require("webpack");
const path = require("path");
const SRC_DIR = path.resolve(__dirname,'src');
const DIST_DIR = path.resolve(__dirname,'dist');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
`${SRC_DIR}/index.js`
],
output: {
path: DIST_DIR,
publicPath: '',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.js?$/,
use: ['babel-loader'],
include: SRC_DIR
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
inject: false,
template: require('html-webpack-template'),
appMountId: 'root',
devServer: '0.0.0.0' +':'+ 8081,
title: "Webpack 4 React"
}),
new ExtractTextPlugin("styles.css"),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new BrowserSyncPlugin({
host: process.env.IP,
port: process.env.PORT,
//server: { baseDir: ['dist'] },
ui: {
port: 8082
},
proxy: process.env.IP +':'+ 8081
},
{
reload: false
}
)
],
devtool: 'source-map',
devServer: {
publicPath:'',
host: process.env.IP,
port: 8081,
hot: true
}
};
package.json
のバベル部分"babel": {
"presets":["es2015","react"],
"plugins": ["react-hot-loader/babel"]
}
多くの可動部分とアプローチは、これをピン止めするのは難しいことです。しかし、これが最も最適なセットアップではないとしても、私はそれが動作するように近づいているように感じる。結局のところ、私のブラウザ同期ページはWDSからHMR jsonを取得しています。多分私はちょっと単純なものを逃したかもしれない。 1つの奇妙なことは公共パスのコンセプトです。例えば、それが空の文字列でない限り、動作させることはできません。私はこれがwebpackの1日目だと言ったように、私はまだここで学ぶことがたくさんある。ありがとう。
私はおそらくちょうど私が上記のコードにちょうどマイナーな変更で、作業の事を持ってフォローアップするために、WebPACKの
import { AppContainer } from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';
import './styles.scss';
const root = document.getElementById("root");
//ReactDOM.render(<App/>,root);
const render = Component =>
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
root
);
render(App);
if (module.hot) module.hot.accept('./Components/App',() => render(App));