为什么在使用Webpack时需要React和ReactDOM作为模块？ 生产产量需要很长时间
编辑：我是错误的。 我正在使用GULP，WEBPACK和BABEL，看我的答案。
我刚刚开始学习React。 基本上我见过的所有教程都使用Webpack和babel。
Webpack和babel都很棒，但是为什么大部分需要作为模块与webpack包文件一起进行反应和反应？
var React = require('react'); var ReactDOM = require('react-dom'); 我们可以加载而不是通过反应的安装页面https://facebook.github.io/react/docs/installation.html底部发现的webpack加载的cdn文件比webpack输出的反应模块小得多（至less对我而言，我已经做了推荐的优化）。
该页面具有这些脚本标签：
开发文件（反应29kb，反应-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）（反应7kb，反应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我已经设法得到反应和反应达到220kb。
对于我来说，在加载到浏览器中时，文件的大小并不重要，至less在开发过程中是这样。
cdn文件将使React和ReactDOM全局variables，这真的很好，但我想这将是更好的，让他们本地模块function，如教程，它不会像将有一个全球性的标识符冲突，虽然。 问题是，当我们需要react.js npm模块的时候，它本身就有很多需要的东西，所以它通过webpack和babel来运行，每当我们做出改变的时候需要几秒钟的时间来产生bundle文件在开发过程中，因为反应非常大。 事实上，我们可以最小化webpack的configuration的反应输出不会改变webpack将花费一段时间来产生最小化输出的事实。 当我对app.js进行一个简单的改变，并希望bundle文件尽快准备就绪。
如果我使用反应CDN文件，只有我自己的应用程序代码与webpack捆绑在一起，我的app.js中的更改几乎是立即捆绑，而不是需要反应，这将需要大约4-5秒捆绑。
有没有人有解决这个比使用CDN？ 我可能会以错误的方式使用webpack吗？
谢谢！
解决了！
正如Lucas Katayama在我的问题的评论中指出的那样，webpack dev服务器只会重新处理已更改的文件。 因此，我不会再多处理一次React和ReactDOM。
我没有使用webpack dev服务器。 我不想。 我只是使用我自己的节点服务器文件，我正在使用Gulp在我的项目中完成各种各样的事情。 捆绑通过webpack-stream https://www.npmjs.com/package/webpack-stream发生
我做错了什么是我正在观看所有的JavaScript文件的任何更改，然后每次运行整个webpack进程（使用gulp-watch观看文件更改）。 这是我在运行缓慢（重新处理反应）时在我的大文件中：
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})); }); });
我必须做的是停止观看我的js文件，并且我必须在webpack.config.js文件中添加一个新选项，选项的名称是“watch”，它必须设置为true。 现在我的吞咽任务看起来像这样：
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" ] } } ] } };
现在速度要快得多。 感谢卢卡斯的评论！