webpack

因为杂事比较多, 很久没写blog了. 深知坚持写下去, 自己的收货也是很大的, 所以和同事打赌每周写一篇blog, 如果做不到就请喝coffee(每周一篇质量不能保证, 只能做到1个月1-2篇~).
"时间挤一挤总会有的"这句话都听过, 但是做起来不一定那么容易. 可能很多人也经常抱怨自己没时间做某某事, 因为惰性, 一个想法过了1年/2年没有去做, 后面就荒废了.
改变自己是最难的, 很多改变也是被逼出来的. 2016, 希望效率能更高, 能把零碎的时间也都利用好.

webpack应该一年以前就研究了, 当时还准备有机会在w3cteach长沙分享的, 那时介绍react/webpack应该极少, 现在已经很多了.
说了些题外话, 开始入正题了.

webpack的作用

总结为: 打包,优化,编译.
打包: 就是可以把模块打包, 处理依赖, 用过requirejs应该很好理解.
优化: 比如图片可以转成base64, 可以最大限度减少http请求.
编译: 这个很重要, 如果一个旧项目, 页面引入了a.js...n.js, 还在思考用gulp/grunt用最普通的方式把*.js压缩合并到一起, 那么理解起来会有点痛苦, 也发现不了webpack的优势, 最好是先通过一个简单的demo或新项目去理解. 需要某个模块的时候, 只要放心大胆的require就好了(webpack里面任何的静态资源都可以当做模块), 最终代码成什么样子webpack已经替你处理好了.

webpack的常用配置参数

//webpack.config.js
module.exports = {
    context: __dirname + '/src', // requre('a.js')的时候从哪个路径查找
    entry: { // 打包成2个文件index.js, about.js
        index: ['./a.js', './a.css', './b.js', './b.css'], // css和js打包到一起(一个js文件), 用<style>添加到页面
        about: ['./a.js', './a.css', './c.js', './c.css'],
    },
    output: { // 打包后的输出目录
        path: './build', // 打包后的文件路径
        publicPath: 'build/', // 打包文件内用到的URL路径, 比如背景图等(可以设成http的地址, 比如: http://cdn.my.com)
        filename: '[name].js' // 打包后生成文件的命名规则, 这里是: index.js, about.js
    },
    externals: { // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过<script>引入了, 就无需都打包到一起了 
        jquery: 'jQuery',
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' }, // 针对.css文件用2个加载器预处理(!号隔开多个加载器)
        ]
    },
};

加载模块

// 1. 同步加载一个模块(像不像nodejs?)
var a = require('./a.js');
a.show();

// 2. 异步按需加载模块(像不像requrejs?)
require(['./a.js'], function(module){
    module.show();
    var c = require('./c.js').show(); // webpack的优化: 最终c.js会和a.js打包成一个模块
});

可以看到, 无论AMD/CMD标准的代码webpack都可以支持. 模块依赖/互相调用的问题, 轻松就解决了, 不需要自己开发或或引用第三方模块加载器了.

上面提到, 任何资源都可以作为模块, 图片/html/json等, 都是可以require的, 只要配置好webpack配置的loaders里面的规则就OK了.

优化打包

什么时候css不打包成JS, 让css也打包成独立的css文件?
打包后的文件名想用带哈希的文件名, 避免缓存?
所有的页面都引用了common.js, lib.js, 希望最终打包的时候, 自动把公共的代码打包成一个独立的common.js?
base64后, 图片的确减少了请求, 但是大图base64得到的字符串太长, 只希望小图片才转base64?
这些都可以做到, 下面的PPT里面有写. 同时还有autoprefixer的介绍, scss/less/图片加载的例子, 通过css-sprite优化sprite.
还有, debug的代码上线时, 不需要手动注释, 可以让webpack自动移除.

旧项目如何改造

AMD/CMD什么的还是要改造旧代码, 旧项目很多lib都是注册变量到window对象下面的, 怎么解?
webpack提供Shim支持, 因为加载模块的逻辑都是loader来处理规则的, 所以imports,exports,expose这三个loader完全可以搞定旧lib.

webpack-dev-server

启动webpack-dev-server后, 本地调试代码时, 页面只需引入<script src="http://localhost:8080/webpack-dev-server.js"></script>, 在改版静态资源经过webpack编译好后, 页面会自动更新.

和gulp结合使用

webpack和gulp并不是敌人, 他们可以搭配使用, 只是我们的惯性思维, 还是停留在用gulp去做打包的动作. 当然单独用webpack基本大部分项目已经足够, 如果项目复杂, 任务较多, 或者需要使用不同的webpack实例, 那么他们结合起来用是没有任何问题的. gulp只负责好任务就OK了.

Kairyou's Blog

专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]