如何在 webpack 或 gulp 中进行热模块替换？

Question

我已经为 reactjs 应用设置了 gulp 和 webpack 配置。这是我的 gulpfile 的片段：

gulp.task('webpack-dev-server', function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = 'eval';
    myConfig.debug = true;
    myConfig.plugins = [
        new webpack.HotModuleReplacementPlugin()
    ];

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        hot: true,
        stats: {
            colors: true
        }

    }).listen(9090, 'localhost', function(err) {
        if (err) throw new gulpUtil.PluginError('webpack-dev-server', err);
    });
});

这是我的 webpack.config：

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

module.exports = {
    cache: true,
    entry: ['webpack/hot/dev-server', './src/app.js'],
    output: {
        path: __dirname + '/src/js',
        publicPath: '/src/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]
    }
};

这是一个回购链接：https://github.com/dimitri-a/koekje

Answer 1

要让 react hot loader 工作，你需要添加 webpack-dev-server 和 react hot loader 插件

npm install react-hot-loader --save-dev

npm install webpack-dev-server --save-dev

添加 devServer 配置（contentBase 是从哪里提供文件）并在加载器中的“babel-loader”之前添加“react-hot”

最后你需要使用 2 个选项来运行 webpack-dev-server： webpack-dev-server --hot --inline

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

/*
 * Default webpack configuration for development
 */
var config = {
  devtool: 'eval-source-map',
  cache: true,
  entry: ['webpack/hot/dev-server', './src/app.js'],
  output: {
      path: __dirname + '/src/js',
      publicPath: '/src/',
      filename: "bundle.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: ['react-hot', 'babel-loader'],
      query: {
        presets: ['es2015','react']
      }
    }]
  },

  devServer: {
    contentBase: "./src",
    colors: true,
    historyApiFallback: true,
    inline: true
  },
}

module.exports = config;