3

我最近尝试为 webpack2 + babel6 + gulp + react-hot-loader 项目制作样板。我从分叉react-hot-loader-minimal-boilerplate开始。然后我添加了一个 gulpfile 作为这个分支。

如果您阅读代码，您会发现我只添加了最后 1 次提交，其中添加了 gulp 包、gulp 文件并添加了npm run gulp脚本。你会想看看gulpfile.babel.js，它目前看起来像这样：

const gulp = require('gulp');
const webpack = require('webpack');
const cfg = require('./webpack.config');
const devServer = require('webpack-dev-server');
const path = require('path');
const util = require('gulp-util');

gulp.task('dev', () => {
  cfg.plugins = [
    new webpack.HotModuleReplacementPlugin(),
  ];
  cfg.entry = {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:8080',
      './src/index',
    ],
  };

  new devServer(webpack(cfg), {
    //contentBase: path.join(__dirname, 'dist'),
    hot: true,
    historyApiFallback: true,
    //publicPath: cfg.output.publicPath,
    stats: {
      colors: true,
    },
  }).listen(8080, 'localhost', function (err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err);
    util.log(`'${util.colors.cyan('dev:server')}' http://localhost:8080/webpack-dev-server/index.html`);
  });
});

按理说，命令npm run dev和npm run gulp应该有同样的效果。但实际上，该gulp命令不起作用。

  • 如果我更改我的 React 代码，浏览器中的代码应该会相应更新。

    代码更新的控制台日志npm run dev： <code>npm run dev</code> 的控制台日志

  • 相反，尽管浏览器确实从 webpack-dev-server 获得了更新信号，但 DOM 并没有随着信号更新。

    代码更新的控制台日志npm run gulp： <code>npm run gulp</code> 的控制台日志

关于如何修复这个样板的任何建议？

4

0 回答 0