WEBPACK的工程化实践
黄健@效率工程
第一部分：WEBPACK基本介绍
前端工程化
前端开发的工程量和代码量已经早已超越早期切图和兼容各种浏览器的阶段，当代
前端开发的复杂度和模块依赖已经在不断的增高，这对前端开发的工程化有了更高
的要求：
1.?提供开发所需的一整套运行环境;
2.?资源管理，包括资源获取、依赖处理、实时更新、按需加载、公共模块管理等；
3.?打通研发链路的各环节，compile、debug、mock、proxy、test、build、deploy等；
资源管理和前端组件化是目前每个前端工程项目都需要直接面对的两大问题，前者
主要解决的是资源管理的问题，后者解决前段代码复用的问题。
Webpack介绍
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含
JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
Webpack的主要特点
1.?资源管理功能强大，兼容AMD,CMD,commonJS等多种标准;
2.?串联式模块加载器以及插件机制，预编译(sass/less/coffeescript/图片转base64）
3.?可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；
4.?开发时在内存中完成打包，性能更快；
5.?支持ES6、JSX、LESS等格式的源文件编译成浏览器识别的格式；
6.?支持静态文件名hash化，支持hash后的文件名及路径注入到后端模版文件中；
7.?任何用到的资源都可作为模块被require(js/css/图片/字体/html...)
8.?支持静态文件自动合并，能够很好的处理公共库和组件文件的合并；
9.?支持环境变量，区分开发环境和生产环境
10.?强大方便的SourceMap支持，可以直接对源代码进行调试；
11.?通过shim特性对各种第三方库进行支持；
12.?能非常方便的与react协作开发
Webpack与fis3的比较
Webpack安装
Step1、$npminstall-gwebpackwebpack-dev-server
Step2、package.jsonbfòAT?script
§￠ON?e
"scripts":{
"start":"webpack-dev-server--hot--progress--colors",
"build":"NODE_ENV=productionwebpack--progress--colors"
}
npmrunstart#项目启动
npmrunbuild#项目编译
Step3、执行命令
命令行参数介绍
第二部分：WEBPACK的文件配置
Webpack-dev-server
webpack-dev-server是一个基于node的小型静态文件服务器,它使用webpack-dev-
middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通
过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-
server发送关于编译状态的消息到客户端，客户端根据消息作出响应，其中作用如下:
webpack-dev-server有两种模式支持自动刷新,frame模式和inline模式,能自动识别文
件改动然后完成页面刷新,推荐使用inline模式：webpack-dev-server--inline
webpac-dev-server支持HotModuleReplacement，即模块热替换，在前端代码变动的
时候无需整个刷新页面，只把变化的部分替换掉。
Webpack的基本用法
推荐入门demo示例
Webpack的静态资源引入
loader使用说明
常用loader列表
方式1:直接js内require:
require(''./a.scss'');//推荐,模块依赖清晰
方式2:webpack.config.js的entry里添加,比如:
entry:{index:[''./index.js'',''./index.scss'']}
Ps:默认会把css/js打包到一起,再通过js添加style到页面;
css里用@importurl(''./ui.css''),会把ui.css内容加到当前文件的最上面(优化掉
@import);
配合extract-text-webpack-plugin,可以把css独立打包(和js一样也会自动合并多个);
图片的处理,webpack.config.js的loaders内设定:
{test:/\.(png|jpg|gif)$/,loader:''url-loader?limit=8192''},//<=8k的图片使用
base64内联,其他的继续用图片
{test:/\.(png|jpg|gif)$/,loader:''file-loader''},//图片独立(兼容
browser)
图片还可以再优化:github.com/tcoopman/image-webpack-loader
Sass/less/css/img的加载
Webpack的模块化管理理念
1.webpack同时提供了对CommonJS、AMD和ES6模块化标准的支持，对于非前三种
标准开发的模块，webpack提供了shimmingmodules的功能。
2.受Node.js的影响，越来越多的前端开发者开始采用CommonJS作为模块开发标
准，npm已经逐渐成为前端模块的托管平台,借用webpack我们可以把
node_modules路径添加到resolvesearchroot列表里边，这样就可以直接load
npm模块.
3.Webpack是使用类似Browserify的方式在本地按目录对依赖进行查找，通过配
置extensions属性列表可以对需要查找的资源扩展名进行自动补全；
Webpack的模块化使用
Webpack的模块编译&输出
webpack的中的主要概念：模块（module）、入口文件（entry）、分块
（chunk）、出口（output）。
webpack编译输出的文件包括以下３种：
entry：入口，可以是一个或者多个资源合并而成，由html通过script标签引入
chunk：被entry所依赖的额外的代码块，同样可以包含一个或者多个文件
filename：实际文件(图片，音频，视频，文本片段，css等，字体文件)
Webpack的模块输出示例
Webpack的模块输出模块
Chunk
在开发webapp时，通常脚本的体积会急剧增大，但是并非所有的功能都会在页面加
载时即用到，出于性能优化的需要，对于这部分资源我们希望做成异步加载，所以
这部分的代码一般不用打包到入口文件里边，webpack针对此种类型提供了成为
codesplitting的代码切块方案:
主要的api为：require.ensure(dependencies,callback)。
Chunk按需加载
CommonChunk
有时考虑类库代码的缓存和公共脚本资源的复用，比如多个页面的模块可能会公用
一部分资源库（如:React,jQuery,underscore等），我们会通过使用commonsPlugin
插件来分析模块的共用代码,并且单独打一个包出来作为公用资源（放至CDN缓存）。
第三部分：WEBPACK的高级使用技巧
Externals
相对采用entry作为入口引入资源，我们经常也会引用外外连或者第三方网站的资源
脚本（比如Google的Analytics,钉钉或微信的sdk脚本库,第三CDN上托管的资源文件
等），因为没有走webpack的打包过程，这就需要我们手动将这些脚本的全局变量配
置到我们的项目工程设置中才能在被工程项目识别,比如我们需要调用钉钉的sdk：
页面引入：https://g.alicdn.com/ilw/ding/0.7.5/scripts/dingtalk.js
module.exports={
externals:{
//根据钉钉的要求，引入dingtalk.js后会得到一个全局的变量dd
''dd'':''window.dd''
}
};
在实际工程中书写即:
//main.js
vardd=require(''dd'');
console.log(dd.device);
Alias
resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对
一些经常要被import或者require的库，如react,我们最好可以直接指定它们的位置，
这样webpack可以省下不少搜索硬盘的时间，同时也能减少相对路径层级。
importEmployeeTreefrom''../../../widget/EmployeeTrees’;
importEmployeeTreefrom''../../../react/react/react’;
可优化成：
importEmployeeTreefrom''widget/EmployeeTrees'';
importreactfrom’react’;
Environmentflags
Webpack提供的设置环境变量来优化代码的方案，通过配置在启动命令行前加上参
数，引入魔法全局变量（magicglobals）,就可以在代码读取相关环境信息来启动
对应的功能（如在开发环境和生产环境中是否需要为资源增加hash值，css在开发环
境中作为内联资源方便调试但是在生产环境中需要打包成独立文件等等）
Shim支持
shim-让不兼容当前环境的API可用,这里就是让非AMD或CJS的API可被使用
http://github.com/webpack/docs/wiki/shimming-modules有很多方式可以实现,
作用主要是模块变量的导入/导出(jquery插件，第三方库等)
Devtool
由于webpack特有的打包机制和对babel,react相关loader的结合,并采用了
sourcemap的形式对代码进行跟踪调试，我们在开发阶段需要选择合适的devtool方
便我们的代码调试。
module.exports={
devtool:isDebug?source-map:''null’
};
hash
webpack构建中自带用hash和chunkhash变量，[hash]是文件的哈希值，用来打版本
号的，[chunkhash]是模块的哈希值，同样可以放在模块的文件名中，也可把当前打
包的hashmap用json储存,给页面调用.
HtmlWebpackPlugin
webpack来动态产生我们最终所期望的HTML文件，而不是指在浏览器运行时使用JS生
成HTML片段，通过读取相关配置文件和信息，自动将打包后的资源路径和版本号写
入HTML中，包括根据指定的模板，插入打包编译后CSS文件路径，插入打包生成的JS
的文件路径,并且还需要为二者添加版本号等
安装：npminstallhtml-webpack-plugin--save-dev
生成：
与第三方构建工具集成
Webpack的核心功能围绕web资源依赖管理和打包生成等，与目前业内主流的构建工
具也可以搭配使用，并不互斥，另外许多开源项目团队也针对webpack开发了各种快
速脚手架，方便项目的搭建。
gulp
vue-cli
generator-react-webpack
bower
参考资料
webpack官网
阮一峰webpackdemo
webpacksourcemap选项多种模式的一些解释
webpack入门指迷
webpack傻瓜指南
webpack入门指南
Webpack使用优化
Q&A
|
|
