Webpacks简单介绍 --真的是写给小白看的

本小白从第一次听说webpack就一直没弄清楚webpack是什么鬼，网上回答扯一堆什么Browserify和grunt、gulp，卧槽这些又是什么鬼？不管了，让我们开始小白间的对话

webpack自动引用一切

pack是打包的意思，wp官网说自己是一个bundler捆束机，打包机。
使用前我的页面是这样的

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js">script>
    <script src="lib/ionic/js/ionic-angular.min.js">script>
    ......省略几百万条
    <script src="js/services.js">script>
    <script src="js/controller.js">script>

使用后我的页面是这样的

    <script src="build/bundle.js">script>

结论

所有的 js 和 css 都通过webpack打包成一个文件，据说它还会给你优化加载速度等一堆乱七八糟的东西。

那么问题来了，css 也给打包进 js 了？

是的，不止css，什么图片、字体tff、svg都可以打包进 这个bundle.js，
原理省略（wo ye bu zhi dao）

具体怎么弄？

什么鬼loader，webpack.config.js配置文件先不要出现，看了就头大。
先专门讲 js 怎么打包。

现在，你有一个controller.js，里面一大堆逻辑
还有一个service.js，里面有一些写好的api

你需要先修改下这两个 js，添加一个输出语法

    module.export = someVariable;//这是你想暴露的api~

然后新建一个app.js(假设都在同级目录下)，名字随便了

    //app.js
    var ctrl = require(./controller.js);
    var api = require(./service.js);
    api.doSomething();

这貌似是commonJS 什么鬼的语法，嗯，我们还是先不要知道了，然后

smartWebpack$  webpack ./app.js bundle.js

嗯，这就 打包好了

完美

另

一个很赞的官网的翻译：
https://github.com/wangning0/Autumn_Ning_Blog/blob/master/blogs/3-12/webpack.md
官网其实讲的很详细，就是看得很心累