enter image description here

什么是Webpack?我们为什么需要它?由于现在的Web应用功能越来越复杂,为了提高开发效率,避免重复劳动,这就要求我们使用模块化的开发方式,但是遗憾的是,JavaScript并没有原生的模块化机制。为了解决这个问题,伟大的先驱们想出了各种各样的办法,最后CommonJS,AMD,CMD等各种模块规范纷纷形成。比如CommonJS规定:模块可以通过require引入,必须通过module.exports导出。可是我们的代码最终很可能是要运行在浏览器上的,这些关键字浏览器并不认识,需要转换成浏览器能够识别的代码才能正常运行。而且每一个模块都是一个单独的JavaScript文件,我们当然不能把这些文件都用script标签引入到html中,第一是文件太多,引入耗时耗力,不划算;第二,这样会导致加载页面是请求的个数变多,加载时间变长,影响用户体验。我们希望能把这些模块打包成一个或少量几个JavaScript文件,然后再去引入并使用它们。Webpack就是一个可以帮我们完成这个任务的工具。(当然还有其他工具,比如Gulp,Grunt。另外,Webpack也不仅仅只有这些功能。)

要使用Webpack,首先要全局安装它:npm install --global webpack。接下来在项目的根目录下创建一个名为webpack.config.js的文件,当我们使用webpack命令打包的时候,Webpack会读取这个配置文件并按配置执行。这个配置文件的结构其实很简单,就是一个JavaScript对象。

enter image description here

上图简单地介绍了Webpack的输入输出设置,接下来需要根据大家各自的项目特性来完成module和plugins部分的编写。以基于React构建的项目为例,我们用到了JSX语法,还用到了一部分ECMAScript 2015的特性,我们需要先转换成浏览器能识别的JavaScript,还有我们的样式采用了预编译语言LESS,这同样也需要处理,其他一些包括小于8KB的图片转换成Base64字符串节约请求,代码的压缩、混淆,以及为了优化首次加载速度实现模块的按需加载等都是我们的需求。一开始,我们不必考虑得这么周全,可以先考虑完成最基本的需求然后再慢慢优化。这里我就介绍一些通用的功能。

首先了解一个事实,Webpack完成我们的需求主要通过两种方式,一个是loader,另一个是plugin。为了贯彻Unix的哲学,一次只做一件事,每一个loader都只负责一个特定的功能。比如babel-loader只能用来转换JavaScript。这些loader在使用之前也必须通过Webpack安装,可以使用npm install --save-dev [package-name]来安装。然后通过配置文件去使用这些loader。下面是一个简单的例子:

enter image description here

上面这段代码展示了如何使用一个loader,每个loader都有自己的配置项,可以去查看它们的文档去了解具体如何使用,不过我认为最关键的是分析出自己到底需要哪些功能,只有知道需求,才知道该使用哪个loader。

除此之外,Webpack还提供了一些插件,比如代码压缩。使用插件的方式同样是配置webpack.config.js。只不过需要依赖Webpack,和loader不同,使用Webpack自带的插件要求在项目根目录下也要安装Webpack,然后将它引入到webpack.config.js中。

const webpack = require( 'webpack' );

enter image description here

还有一些第三方提供的插件,比如htmlWebpackPlugin,也需要先安装对应的npm包,然后按照文档的配置项使用就可以了。

enter image description here

完成之后,在项目根目录下执行webpack命令就可以啦!

总结一下,Webpack的使用并不困难,最主要的问题是你要清楚自己需要什么,哪些loader或者plugin能够做这件事情。Have fun!

打个小广告,这是我的微信公众号,欢迎关注!

enter image description here