webpack
Introduction
安装前先npm初始化
本地服务
复制html
处理css
处理less
抽离css文件,通过link引入
压缩css和js
给css加上兼容浏览器的前缀
es6 转 es5
es7的语法
全局变量引入
webpack图片打包
当图片小于多少,用base64
打包文件分类
希望输出的时候,给这些`css\img`加上前缀,传到服务器也能访问
如果只希望处理图片
打包多页应用
配置source-map
watch改完代表重新打包实体
webpack的其他三个小插件
webpack跨域
如果后端给的请求没有API 「跨域」
前端只想单纯mock数据 「跨域」
有服务端,不用代理, 服务端启动webpack 「跨域」
webpack解析resolve
但是每次引入都很长,如何优雅引入
省略扩展名
定义环境变量
区分两个不同的环境
webpack 优化
优化:当某些包是独立的个体没有依赖
优化:规则匹配设置范围
优化:忽略依赖中不必要的语言包
动态链接库
多线程打包happypack
webpack 自带的优化
抽取公共代码
懒加载(延迟加载)
热更新(当页面改变只更新改变的部分,不重新打包)
tapable介绍 - SyncHook
tapable介绍 - SyncBailHook
tapable介绍 - SyncWaterfallHook
tapable介绍 - SyncLoopHook
AsyncParallelHook与AsyncParallelBailHook
异步串行 —— AsyncSeriesHook
异步串行 —— AsyncSeriesWaterfallHook
手写webpack
webpack分析及处理
创建依赖关系
ast递归解析
生成打包工具
增加loader
增加plugins
loader
配置多个loader
babel-loader实现
banner-loader实现(自创)
实现file-loader和url-loader
less-loader和css-loader
css-loader
webpack 中的插件
文件列表插件
内联的webpack插件
打包后自动发布
Powered by
GitBook
Introduction
webpack
重新学习webpack
webpack文档
文件对应的目录
自己实现may-pack
对应的项目webpack-training
文件对应的目录
results matching "
"
No results matching "
"