Question

我正在学习一些教程，但主要是Dan Abramov关于设置反应热装载器的教程，但我遇到了一些问题。我认为我有一个基本配置工作，但是组件的热重新加载似乎不起作用，所以显然热设置器设置是错误的：（

当我更改组件时，我的浏览器控制台会记录下来：

The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
- ./app/components/Home/index.jsx

首先，这是我的文件结构：

.
|++[app]
|----[actions]
|----[modules]
|----[reducers]
|----[store]
|----index.html
|----index.js
|--[config]
|----server.js
|----webpack.config.js
|--[node_modules]
|--package.json

这是我的webpack配置：

var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var isProd = process.env.NODE_ENV === 'production';

module.exports = {
  devtool: isProd ? null : 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.resolve('app/index.js')
  ],
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    root: path.resolve( 'app/'),
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: [
          'babel'
        ],
        include: path.resolve('.'),
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'file-loader?name=img/[name].[ext]'
      },
      {
        test: /\.scss$/,
        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  postcss: [
    autoprefixer({ browsers: ['last 3 versions'] })
  ]
};

我的server.js

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var path = require('path');
var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.get('/*', function(req, res) {
  res.sendFile(path.resolve('app/index.html'));
});

app.listen(port, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info('started on localhost://%s.', port);
  }
});

Answer 1

react-hot数组中缺少module.loaders加载程序。 More into this

接下来，我们需要告诉Webpack使用React Hot Loader作为组件。如果你为React配置了Webpack，你可能已经使用babel-loader（ex 6to5-loader）或jsx-loader来获取JS（X）文件。在webpack.config.js中找到该行，并在其他加载器之前放置react-hot。

所以你需要在react-hot加载器之前添加babel加载器，如下所示：

{
  test: /\.jsx?$/,
  loader: 'react-hot',
  exclude: /node_modules/
}

如果您还没有安装react-hot-loader模块，也需要安装。

npm i -D react-hot-loader

设置我的webpack配置时遇到一些麻烦

1 个答案: