12

StackOverflow と GitHub の問題についても多くの回答を確認しましたが、Webpack のホット モジュール交換にまだ行き詰まっています。npm startでサーバーを実行するために使用していますwebpack-dev-server --hot --inline。React コンポーネントのコードを変更しようとしていますが、ブラウザで何も起こりません。

Ubuntu 14.04LTS で Google Chrome バージョン 49.0.2623.87 (64 ビット) を使用しています。

私のブラウザconsoleでは、ログメッセージを次のように取得しています

[HMR] WDS からの更新信号を待っています...

[WDS] ホットモジュール交換が有効になりました。

ただし、ホット/ライブ リロードは発生していません。React コンポーネント ファイルのコードを変更しても、何も表示されません。このチュートリアルの最初のビデオ、Egghead.io/ReactFundamentalsに従っていましたが、すべてが正常に機能していました。

以下は私のpackage.jsonとwebpack.config.jsファイルです。

パッケージ.json

{
  "name": "react-fundamentals",
  "version": "1.0.0",
  "description": "Fundamentals of ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.0-rc.2",
    "react-dom": "^15.0.0-rc.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devServer: {
    port: 7777
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  }
}

チュートリアルをこれ以上効率的に進められないので、誰かがこの問題を解決してくれると助かります。

更新私は以下の答えを投稿しました。

4

6 に答える 6

5

私は自分で解決策を考え出しました。

でサーバーを実行する必要がありますsudo。ではなくnpm start、 でなければなりませんsudo npm start。

それが役に立てば幸い！

于 2016-04-26T07:46:27.633 に答える
3

Webpack 構成がオフになっています。正しいセットアップについては、react-transform-b​​oilerplateを参照してください。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  // or devtool: 'eval' to debug issues with compiled output:
  devtool: 'cheap-module-eval-source-map',
  entry: [
    // necessary for hot reloading with IE:
    'eventsource-polyfill',
    // listen to code updates emitted by hot middleware:
    'webpack-hot-middleware/client',
    // your code:
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

.babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}
于 2016-03-25T04:40:41.430 に答える
3 
devServer: {
 inline: true, // you missed this line which will reload the browser
 port : 7777
}
于 2016-03-25T03:33:35.073 に答える
-2

モジュールローダーをこれに更新してみてください：

loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel"],
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
于 2016-03-25T02:50:01.330 に答える