【进阶系列】Webpack基础整理专题
1 模块化工具Webpack
1.1 概念简介
1.1.1 WebPack是什么
1 一个打包工具
2 一个模块加载工具
3 各种资源都可以当成模块来处理
4 网站 http://webpack.github.io/
如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。
对于模块的组织，通常有如下几种方法：
1 通过书写在不同文件中，使用script标签进行加载
2 CommonJS进行加载（NodeJS就使用这种方式）
3 AMD进行加载（require.js使用这种方式）
4 ES6模块
思考：为什么只有JS需要被模块化管理，前台的很多预编译内容，不需要管理吗？
基于以上的思考，WebPack项目有如下几个目标：
• 将依赖树拆分，保证按需加载
• 保证初始加载的速度
• 所有静态资源可以被模块化
• 可以整合第三方的库和模块
• 可以构造大系统
从下图可以比较清晰的看出WebPack的功能
Webpack功能示意图
1.1.2 WebPack的特点
1 丰富的插件，方便进行开发工作
2 大量的加载器，包括加载各种静态资源
3 代码分割，提供按需加载的能力
4 发布工具
1.1.3 WebPack的优势
• webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
• 能被模块化的不仅仅是JS了。
• 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
• 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
1.2 HJDev前端模块规划
Js合并的原则是：大小不能超过500KB
总体包括三类：
Vendor类文件，第三方类库，命名规则是hj_vender_***.js，原则上同一个大框架的文件合并到一起，例如Angular、jQuery、mui等；
Common类文件，自定义的通用类库，命名规则是hj_common_***.js，原则上目前所有自定义类库可以合并成一个文件，大小不超过500KB；
各模块js文件，考虑到cssloader的样式替换原理，css样式文件不做合并；服务调用文件目前通用度比较低，各模块调用情况差异比较大，故也不做统一合并，而是合并到各模块js文件中打包压缩。
1.3 Angular模块模块化整改
1.3.1 Html文件整改
1、删除所有Script标签引用的文件，改成在js文件中用require引用；
2、增加dll文件引用；
3、对于img标签中引用的相对路径的图片，改用angular参数绑定的形式引用；
1.3.2 js文件整改
1、将angular、swiper等node.js管理的第三方类库采用require方式引用；
2、将所引用的css文件、js文件、子模块html文件均用require方式引用；
3、将自定义Angular模块进行模块化整改；
var loginModule = angular.module("login", ['hj_User', 'hj_Service', 'ui.router', "hj_Comment"]);
loginModule.name = "login";
module.exports = loginModule.name;
4、对于路由策略中子模块html的引用方式，改用require方式引入，必要的时候考虑采用异步加载方式引入；
.state('lock', {
//手势解锁登录页面
url: '/lock.html',
//templateProvider:function($q) {
// var deferred = $q.defer();
// require.ensure(['./lock.html'], function(require) {
// var template = require('./../../html/account/lock.html');
// deferred.resolve(template);
// }, 'lock');
// return deferred.promise;
//},
template: require('./../../html/account/lock.html'),
controller: require('./../public/hjCommon/geslock.js'),
params:{
loginSet:"",
isLogin:""
}
})
1.3.2.1 子模块js文件单独编写时require引用处理
1.3.3 css文件整改
1.3.3.1 background样式中url引用整改
对于css样式，要求将background样式中url函数引用改成background-image:
原来写法
background:url("../image/ img_03") no-repeat rightcenter;
整改后写法：
background-image: url("../image/img_03.png");
1.3.3.2 background样式中空链引用删除
css样式中有背景图引用了空链接，会导致报错，例如：
.right_noIcon{
background: url('');
}
background-image:
url('');
解决方案：
删除空链接引用；
1.3.4 webpack打包配置
在webpack.config.js文件中，首先要引入html打包插件，然后进行html与js文件的配置：
var HtmlWebpackPlugin = require('html-webpack-plugin');
在入口文件entry中如下配置，其中涉及子模块js逻辑写在另一个js文件的需要采用[]包含路径，：
//页面入口文件配置
entry: {
home : './m/js/home/home.js',
product: './m/js/home/productIndex.js',
userinfo: './m/js/asset/userInfoIndex.js',
login: ['./m/js/account/login.js'], },
在plugins一项中做如下配置：
//Fund模块打包
new HtmlWebpackPlugin(
{
//根据模板插入css/js等生成最终HTML
// favicon:'./src/img/favicon.ico', //favicon路径
//生成的html存放路径，相对于path
filename:'html/home/fundProductIndex.html',
//html模板路径
template:'m/html/home/productIndex.html',
inject: true, //允许插件修改哪些内容，包括head与body
hash: true, //为静态资源生成hash值
//压缩HTML文件
minify:{
removeComments: false, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
},
chunks:['dll_angular','dll','common','product']
}),
2 参考资料
前端js和css的压缩合并之gulp
