美文网首页简单易懂的React魔法
简单易懂的React魔法(02):为什么要用webpack

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

作者: 誅诺 | 来源:发表于2017-08-14 15:34 被阅读30次

    当终端运行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的时候非常有用。

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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/dtpurxtx.html