浅谈webpack · Web前端爱好者
其实Webpack就是一个模块加载器，官方的原话如下：
webpack takes modules with dependencies and generates static assets representing those modules.
在谈Webpack之前，我们先谈谈两个规范：CMD和AMD。
CMD，也称通用模块定义，是一种同步的模块机制，相信玩过Node的童鞋对下面这种写法一点也不陌生：
var demo = require('otherModule'); // some code... module.exports = demo; |
AMD，也称异步模块定义，是一种异步的模块机制，比较典型的是requireJS的写法：
define( ['module1','module2'], function(module1,module2){ // some code... return module; }); |
对比上面两种规范的写法，显然我们更加愿意接受CMD，相信写过一大堆callback的童鞋深有体会。随着npm成为主流的JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，这时候browserify就出现了，它支持require()的同步语法去加载npm模块。
当然在最近公布的ES2015(ES6)里也定义了一套新的模块机制，写法大概如下：
import {module1} from 'module1'; // some code... export module2; |
为何用webpack
webpack具有非常好的功能特性：
- 同时支持CMD和AMD模块；
- 支持模块加载器和插件机制，可对模块进行定制；
- 可通过配置，打包成多个文件，有效利用浏览器的缓存机制提升性能；
- 对样式文件和图片等静态资源视为模块进行打包，配合loader加载器可以支持sass，less等css预处理器；
- 内置source map，即使打包在一起依旧方便调试。
webpack使用入门
全局安装webpack
在终端执行下面代码将webpack安装到全局：npm install -g webpack，若是mac或者linux系统提示权限不足，请用sudo npm install -g webpack然后输入管理员密码执行。
初始化项目
新建一个名为xxx的项目，在该项目根目录下打开终端，执行
npm init，接下来填写一些项目的基本信息，最后确认ok之后会在根目录下生成package.json文件。新建一些示例文件，大概示意图如下：
xxxassetscssdemo.lessjsentry.jsindex.jshtmlindex.htmlbuildpackage.json(上一步生成的文件)webpack.config.js(webpack核心配置文件)
配置webpack.config.js
我们在使用webpack的时候默认配置文件是webpack.config.js，下面配置一下这个js文件（稍微复杂了一点，已经有详细的说明）：
var webpack = require('webpack'); module.exports = { // webpack入口文件 entry : './assets/js/entry.js', // webpack输出文件， output : { path : './build', publicPath : '/assets/', filename : 'bundle.js' }, // loader加载器，包括了less编译，图片压缩为base64，es6转为es5三个 module : { loaders : [ { test : /\.less/, loader : 'style-loader!css-loader!less-loader' }, { test : /\.(png|jpg)$/, loader : 'url-loader?limit=8192' }, { test : /\.js$/, exclude : /node_modules/, loader : 'babel-loader' } ] }, // 文件不写扩展名时使用的默认扩展名 resolve : { extensions : ['', '.js', '.json'] }, // 插件，提取公用的JS出来，重复利用 plugins : [ new webpack.optimize.CommonsChunkPlugin('common.js') ] }; |
完善其他demo文件
- index.html文件
index.html文件只需要引入bundle.js即可，代码如下：
%lt;script src="/assets/bundle.js"></script> |
- index.js文件
index.js文件写了一个es6的demo，代码如下：
class People { constructor( name ) { this.name = name; } sayHi() { let name = `hi ${this.name} !`; console.log(name); } } module.exports = People; |
- entry.js文件
entry.js文件则引入index.js文件以及less样式文件写一些demo代码：
let People = require('./index'); let p = new People('sky'); p.sayHi(); require('../css/demo.less'); |
- demo.less
demo.less文件主要写一些演示的样式代码：
h1 { color:#f00; font-size:20px; } |
启动webpack
这时候上面的整个项目已经准备好，只需要在项目根目录下面，用webpack的命令执行即可：
// webpack 命令行的几种基本命令,更多命令可以在终端输入webpack --help $ webpack // 最基本的启动webpack方法 $ webpack -w // 提供watch方法，实时进行打包更新 $ webpack -p // 对打包后的文件进行压缩，提供production $ webpack -d // 提供source map，方便调试。 |
验证
经过上一步的webpack执行命令之后，build文件夹下面应该多了一个bundle.js文件，这时候打开index.html文件会发现less样式也已经生效。
实战项目注意点
- 项目中如果需要引入Zepto这类前端包是不兼容webpack的，需要加入包引出的声明：
module.exports=Zepto
