第三章 webpack进阶用法
自动清理构建目录
通过npm scripts清理构建目录
rm -rf ./dist && webpack
rimraf ./dist && webpack
//再执行webpack
自动清理构建目录 clean-webpack-plugin
PostCSS插件autoprefixer自动补齐CSS3前缀
CSS3的属性为什么需要前缀？
浏览器标准不统一，有四种浏览器内核
PostCSS插件 autoprefixer 自动补齐CSS3前缀
autoprefixer 是后置处理，less和sass是预处理
postcss-loader功能比较强大，除了支持css样式补全，还支持css module和css in JS ？（css si ga ling de （音））
npm i postcss-loader autoprefixer -D
移动端CSS px自动转换成rem
浏览器的分辨率
移动端分辨率不一样，得不断适配
过去怎么做？
编写多套，代码量大，效率低
rem是什么？
W3C对rem定义： font-size of the root element
rem是相对单位， px是绝对单位
移动端 CSS px自动转换成rem
lib-flexible 可以通过root 元素的font-size计算宽高
npm i lib-flexible -S
remUnit rem相对于px转换的单位 remPrecision px转换成rem小数点的位数
静态资源内联
图片字体内联到代码中去
资源内联的意义
代码层⾯： ·⻚⾯框架的初始化脚本 ·上报相关打点 （css初始化，css加载完成，keep start？，js初始化，js加载完成） · css 内联避免⻚⾯闪动 （html回来，css也回来了）
请求层⾯：减少 HTTP ⽹络请求数
· ⼩图⽚或者字体内联 (url-loader， 参数limit，小于limit直接内联进去)
HTML和JS内联
raw-loader 内联 html
<script>${require(' raw-loader!babel-loader!. /meta.html')}</script>
raw-loader 内联 JS
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>
内联之前通过babel-loader转换
raw-loader 0.5版本好用（0.5.1），课程中讲课时最新版本有问题，现在可以尝试最新版本试试
CSS内联
方案二用的比较广泛
html5开发需要头部meta信息
npm i raw-loader@0.5.1 -D
多页面打包通用方案
多⻚⾯应⽤(MPA)概念
每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档， 这种类型的⽹站也就是多⻚⽹站，也叫做多⻚应⽤。有很多入口，一个页面是一个业务。
优势：
1. 每个页面业务都是解耦的；
2. SEO友好；
单页面应用就是所有业务都是一个url，只不过后面hash会发生变化。
多页面打包基本思路
多页面打包通用方案
使用sourcemap
作⽤：通过 source map 定位到源代码
· 线上排查问题的时候可以将 sourcemap 上传到错误监控系统
· source map科普⽂：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.htm
一般情况下： 开发环境开启，线上环境关闭
线上排查问题的时候可以将 sourcemap 上传到错误监控系统
webpack会把源代码打包成bundle文件，bundle文件通过loader处理，webpack处理 webpack构建过程形成json文件
source map关键字
source map 类型
根据source map关键字排列组合
提取页面公共资源
基础库分离
因为基础库可能打包慢，就直接cdn引入
利用SplitChunksPlugin 进行公共脚本分离
利用SplitChunksPlugin 分离基础包
利用SplitChunksPlugin 分离页面公共文件
Tree Shaking 的使用和原理分析
tree shaking 摇树优化
必须ES6语法
概念：1 个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到 bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在 uglify 阶段被擦除掉。
使⽤：webpack 默认⽀持，在 .babelrc ⾥设置 modules: false 即可
要求：必须是 ES6 的语法，CJS 的⽅式不⽀持
· production mode的情况下默认开启
DCE （Dead code elimination）
Tree-shaking 原理
利⽤ ES6 模块的特点:
·只能作为模块顶层的语句出现
· import 的模块名只能是字符串常量
· import binding 是 immutable的
代码擦除： uglify 阶段删除⽆⽤代码
tree-shaking方法不能有副作用，有副作用也有可能失效
Scope Hoisting使用和原理分析
会导致什么问题？ 运⾏代码时创建的函数作⽤域变多，内存开销变⼤ ⼤量作⽤域包裹代码，导致体积增⼤（模块越多越明显
scope hoisting原理
scope hoisting使用
CJS动态引入没办法静态分析
harmony import ： es6的简称
参考
极客时间 程柳峰老师 《玩转webpack》
