为什么我们在和Webpack一起工作时需要React和ReactDOM作为模块？它需要很长时间才能产生输出

Question

编辑:我错了。我用的是咽喉、WEBPACK和巴别塔，请看我的答案。

我刚刚开始学习React。基本上，我看过的所有教程都使用了Webpack和巴别塔。

Webpack和巴别塔很棒，但是为什么大多数都需要react和react-dom作为模块来打包到webpack包文件中呢？

var React = require('react');

var ReactDOM = require('react-dom');

我们可以加载的cdn文件，而不是让react通过react安装页面https://facebook.github.io/react/docs/installation.html底部找到的文件，比webpack输出的react模块要小得多(至少对我和我已经做了推荐的优化)。

该页面具有以下脚本标记：

开发文件(react 29kb，react-dom 137kb)：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

生产文件(.min.js) (react 7kb，react-dom 36kb)：

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

生产文件总计43kb，开发文件总计166kb。通过使用webpack，我成功地将react和react-dom压缩到了220kb。

对我来说，当文件加载到浏览器中时，文件的大小并不重要，至少在开发期间不是这样。

cdn文件将创建React和ReactDOM全局变量，这真的很好，但我想让它们成为模块函数的局部变量会更好，虽然不会有全局标识符冲突。问题是，当我们需要react npm模块时，它本身就有许多需求，等等，它会通过react.js和babel运行，每次我们在开发过程中进行更改时，都需要几秒钟的时间来生成包文件，因为react非常大。我们可以使用webpack的配置最小化react的输出，但这并不能改变这样一个事实，即webpack需要一段时间才能产生最小化的输出。当我对我的app.js进行了简单的更改并希望尽快准备好捆绑包文件时。

如果我使用react cdn文件，并且只有我自己的应用程序代码捆绑在webpack中，那么我的app.js中的更改几乎可以立即捆绑在一起，而不是需要react，然后需要大约4-5秒的时间来捆绑。

除了使用cdn之外，还有其他人有解决方案吗？我有没有可能用错了方式来使用webpack？

谢谢!

Answer 1

解决了！

正如Lucas Katayama在我的问题下面的评论中指出的那样，webpack开发服务器只会重新处理已经更改的文件。因此，我相信它不需要多次处理React和ReactDOM。

我不是在用webpack开发的服务器。我不想做。我只是简单地使用我自己的节点服务器文件，并且我使用Gulp在我的项目中完成各种事情的所有构建。捆绑通过webpack流https://www.npmjs.com/package/webpack-stream进行

我的错误之处在于，我一直在查看我所有的javascript文件是否有任何更改，然后每次都运行整个webpack进程(使用gulp-watch查看文件更改)。这是当我的gulp文件运行缓慢(reprocessing React)时，我在其中的内容：

var gulp = require('gulp');
var watch = require('gulp-watch');
var webpack = require('webpack-stream');
var webpackConfig = require('./webpack.config');
var browserSync = require('browser-sync').create();


gulp.task('js', function() {

    return watch('./src/js/**/*.js', function () {

        return gulp.src('./src/js/app.js')
            .pipe(webpack(webpackConfig))
            .pipe(gulp.dest('./dist/js/'))
            .pipe(browserSync.reload({stream: true}));

    });

});

我所要做的是停止使用gulp查看我的js文件，并且我必须在我的webpack.config.js文件中添加一个新的选项，该选项的名称是" watch“，它必须设置为true。现在我的吞咽js任务看起来像这样：

gulp.task('js', function() {

    return gulp.src('./src/js/app.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(browserSync.reload({stream: true}));

});

我的webpack.config.js文件如下所示：

module.exports = {

  watch: true,

  output: {
      filename: "bundle.js"
  },

  module: {
      loaders: [
          {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: "babel-loader",
              query: {
                  presets: ["latest", "react"],

                  plugins: [
                      "react-html-attrs",
                      "transform-class-properties",
                      "transform-decorators-legacy"
                  ]
              }
          }
      ]
  }

};

现在快多了。谢谢你的评论，Lucas！