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

为了让反应热的加载器工作，你需要添加webpack-dev-server＆amp;反应热插件插件

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

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

添加devServer配置（contentBase来自将提供文件的位置）并添加“反应热”＆＃39;在＆＃39; babel-loader＆＃39;

之前的装载机中

最后，您需要运行带有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;

如何在webpack＆amp ;;中进行热模块更换工作吞掉？

1 个答案: