使用热重载程序时无法解析模块‘webpack/热/发射器’

Question

我正在尝试在我现有的应用程序中实现react-hot-loader。我遵循了tutorial，并按照教程中的建议使用了此link中的样板文件。然后，当我使用yarn start启动节点服务器时，我得到以下错误：

ERROR in (webpack)-dev-server/client?http://0.0.0.0:3000
Module not found: Error: Cannot resolve module 'webpack/hot/emitter' in /Users/Rai/Documents/github/sarvahitey-core/client/node_modules/webpack-dev-server/client
 @ (webpack)-dev-server/client?http://0.0.0.0:3000 153:19-49
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.78 kB [rendered]
        [0] ./~/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./app/client/components/navbar/navbar.css 274 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.

以下是我的webpack配置文件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var combineLoaders = require('webpack-combine-loaders');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './app/StartUp.js'
  ],
  output: {
    path: __dirname + "/../app/assets/webpack",
    filename: "[name].js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
  },
  module: {
    loaders: [
      { test: /\.jsx?$/,
        loaders: ['react-hot','babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
            'style-loader',
            combineLoaders([{
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }])
        )
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("main.css"),
    new webpack.HotModuleReplacementPlugin()
  ]
};

我的package.json文件有以下配置：

{
  "dependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-runtime": "^6.22.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-on-rails": "^6.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-combine-loaders": "^2.0.3",
    "webpack-dev-server": "^2.3.0"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1"
  },
  "scripts": {
    "start": "node server.js"
  }
}

你知道为什么我会得到上面的错误吗？我试着用谷歌搜索同样的东西，但是找不到关于Cannot resolve module 'webpack/hot/emitter'的任何东西。

Answer 1

如果您想使用webpack@1.14，请安装webpack-dev-server@1.16.3。