为什么在使用WebPack时，我们需要对模块进行反应和反应?产生输出需要很长时间

Question

编辑：我错了。我正在使用Gulp，Webpack和Babel，请参阅我的答案。

---

我刚刚开始学习反应。基本上，我看到的所有教程都使用了WebPack和Babel。

webpack和babel很棒，但是为什么大多数人需要反应和反应作为与Webpack捆绑文件包装的模块？：

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

我们可以加载的CDN文件而不是使React通过React安装页面底部找到的WebPack https://facebook.github.io/react/react/docs/installation.html要小得多该WebPack输出（至少对我而言，我已经建议进行优化）。

页面具有以下脚本标签：

开发文件（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 and ReactDom全局变量确实很好，但我想让它们成为像教程这样的模块函数会更好。问题是一个事实是，当我们需要react.js npm模块时，它本身在其中需要很多，依此类推，并且它可以通过webpack和babel运行，每次我们进行更改时，它需要几秒钟才能产生捆绑文件。在开发过程中，因为反应很大。我们可以将与WebPack配置的React的输出最小化这一事实不会改变WebPack需要一段时间才能产生最小化输出的事实。当我对我的app.js进行简单更改并希望捆绑文件尽快准备就绪。

如果我使用React CDN文件，并且只有我自己的应用程序代码与WebPack捆绑在一起。

除了使用CDN以外，有人对此有其他解决方案吗？我可能会以错误的方式使用webpack吗？

谢谢！

Answer 1

解决了！

正如Lucas Katayama在我的问题下的评论中指出的那样，WebPack Dev Server只会重新处理已更改的文件。因此，我相信它不必多次处理反应和反应。

我不使用WebPack Dev服务器。我不想。我只是使用自己的节点服务器文件，然后使用Gulp来完成项目中各种事情的所有构建。捆绑发生了，尽管webpack-stream https://www.npmjs.com/package/webpack-stream

我做错了什么是我正在观看所有更改的JavaScript文件，然后每次运行整个WebPack进程（使用Gulp-Watch观看文件更改）。这是我在墨西哥湾文件缓慢运行时的所示（重新处理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 Watch观看JS文件，而我必须在WebPack.config.js文件中放置一个新选项，该选项的名称是"观看"，必须将其设置为true。现在我的Gulp 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！