简单易懂的React魔法(02):为什么要用webpack

当终端运行webpack命令时 它会将react应用打包为dist目录下的bundle.js
你会发现bundle.js很大，我的有940KB。
如果你打开这个文件你会发现一堆你没写过的代码，别担心 你写的哪一行console.log就在这个文件里， 整个js剩下的都是因为你用了react，这些很重要。

我们的bundle.js包含这你没写过的很多代码，这就是我们为什么用webpack，它会压缩集成你项目所引用的库。
用命令行直接运行webpack 得到了正确的结果，不过我们一般不这么用它。因为我们除了webpack还安装了webpack dev server，这是开发react应用最简单的方法，所以在终端运行以下命令

webpack-dev-server

电脑会先卡一会，然后瞬间刷出几百行来，我希望最后一句是

“webpack: bundle is now VALID.”

Webpack dev server 将会打包你的项目到一个单独文件然后将dist文件夹作为服务器的根目录。

打开你的浏览器链接到http://localhost:8080。这就是你webpack dev server 的本地服务器地址。它不但帮你打包项目，还会打开一个服务器把项目放上去。

到现在为止我们的代码什么都没做，不过你打开控制台，能看到控制台输出了一行 “React is up and running!”

这表示我们的准备工作全都做好了，是时候开始开始写react了。

注意：如果你用的是chrome，请安装 React Chrome Developer Tools，这个在你debug的时候非常有用。

要确保你能找到控制台啊，这很重要。