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
http://www.tuicool.com/articles/3UnEZ36
来源: http://www.jianshu.com/p/fa1a7f54fc16