why webpack?

开篇

关于Webpack用法我不想讨论太多, 这里是要讨论几个问题

• js模块化工具那么多, 为什么还要有webpack
• 和grunt, gulp有什么区别
• 可以通过webpack生成一个组件吗

ps:跟官方教材走一遍, 10分钟

为什么还要webpack, 关键是模块化！

关于模块化, 看看这个也许会有更深刻的理解
模块化发展史

webpack天生支持CommonJS, 自动打包, 生成单一bundle.js, 在html直接引用即可.

js可以模块化，那么css呢? 官方教材就告诉你webpack的过人之处
[webpack tutorial]http://webpack.github.io/docs/tutorials/getting-started/

打包css的好处? 比如写一个轮播图, 你需要用户自行添加样式, 使用webpack就不需要再麻烦了, 直接打包好.

与gulp, grunt区别?

原来是互补, 后来大家发现gulp能做的, webpack也可以, 而且还做得不错.

问题:能否用webpack生成一个组件?

根据官方教材稍微做了一点修改

###测试方法
修改enrty.js

module.exports = function() {
    "use strict";

    require("!style!css!./style.css"); 
    document.write(require("./content.js"));
}

打包得到bundle.js, 将bundle.js改名为module.js

再修改entry.js

require('./module.js')();

应该是能得到一样的结果

然而并不行, 连续两次打包产生了错误, 这样不可以产生可复用的组件以提供其他项目使用.

ps: 睡醒后发现, 用webpack打包成组件相当愚蠢. 你不是已经写好组件然后用webpack来组装么.

webpack缺点

使用sourcemap的调试速度感人[手动再见]

所以呢?

举个例子, 你写了一个轮播图, 想模块化.

• 方案1: webpack打包css和js成一个bundle.js, 然后其他人插一个script到html
• 方案2: 打包成一个npm, 说明用了CommonJS, 让人家require你的entry.js, 然后人家用webpack打包

哦~ 太好了,我也理清了思路.