本小白从第一次听说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
官网其实讲的很详细,就是看得很心累