webpack
webpack打包器的理解:
- 将多个文件打包成一个文件,减少http的资源请求
- 将文件进行压缩、混淆打包,缩小了文件体积
- 处理兼容:
js:借助babel,将高级的js语法处理为低级的js语法,从而达到兼容的处理
css:借助postcss,Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自 动为 CSS 规则添加前缀。
- 可以利用webpack搭建脚手架工程化项目
- webpack还可以在打包的时候对项目进行优化
loader/plugin/babel的区别
loader: 解析非js文件
plugin: webpack的插件,增强webpack的功能
babel: 语法降级,使浏览器进行兼容
项目中配置babel
- 安装需要的包
- 在项目中通过.babelrc或babel.config.js进行配置
- preset: 预设,转换的语法 es6 => es5
- env: 根据环境进行配置
- development
- production
- test
plugins: 插件,例如移除console的插件应该在production环境中使用
webpack打包优化
- soucemap,将打包压缩后的文件进行映射,从而可以让项目出现问题,精确的定位到开发代码的哪一行,但是会产生很多的map文件,所以生产阶段需要关闭: productionSourceMap: false
- splitChunks:将公共代码进行提取,webpack在打包时,,如果某一个文件在很多文件中使用会被重复打包:
- 通过chunks进行提取方式的配置
-
- all:不管同步还是异步都提取一个文件
- initial:同步使用了,异步也使用了,提取两次
- async:只提取异步加载的模块
- cacheGroups:配置提取方案
-
- name:生成的名字
- test:匹配的路径或资源名称
- chunks:单独进行chunks
- priority:优先级,数越大,优先级越高
- reuseExistingChunk:如果要提取的模块已存在直接复用
- minChunks:最小引用次数
- vue-cli3默认开启prefetch,在加载首页的时候,就会提前获取用户可能访问的内容,提前加载其他路由模,所以我们要关闭该功能
这里要注意:不会影响首屏的加载速度,实际是为了优化子页面,可以快速打开子页面,但是像移动端,用户可能只会访问首页,也预加载其他模块的资源,浪费用户流量
config.plugins.delete('prefetch')
- 打包成gzip,可以进行资源请求的时候速度更快,通过compression-webpack-plugin将文件打包成压缩包 在chainwebpack中配置,可以通过配置项修改打包的阀值,文件名\其他配置的,需要服务器nginx配置
- runtimeChunk:运行时chunk,异步加载的代码,如果不开启,运行时代码或者代码没有发生变化,项目重新打包,此时我们的主模块会进行重新打包,的hash会发生变化(app.sdfjkad123(hash).js),项目部署后,会导致强缓存失效;开启runtimeChunk,会将运行时代码信息单独的存放到runtime.h12h3.js文件中,此时我们的主模块代码没有发生变化,或者运行时代码发生变化,都不会影响到主模块,所以主模块不会重新更新,主模块可以继续使用本地缓存;但是还需要配合script-ext-html-webpacl-plugin,将runtimeChunk代码生成到行内,如果是一个单独的文件,多发起一次请求
- 通过image-webpack-loader进行图片的打包压缩
- 开启路由懒加载 将每个路由进行单独打包
- 借助externals可以进行忽略打包,转为cdn资源方式引入,从而提高用户访问资源的速度
自己搭建脚手架
- 初始化项目的基本目录和package.json文件
- 安装webpack webpack-cli包
- 默认会查找到src/index.js文件进行打包,最终输出dist内部index.js
- 查找入口之前,加载webpack.config.js
-
- 打包的入口: input
- 打包的出口: output
- 配置babel: webapck默认只能处理低级的js文件,利用babel进行降级
-
- 下载预设和插件
- babel.config.js进行配置: plugins: 用于配置插件,preset: 用于配置预设
- 配置loader: 解析三方文件(css/less/scss/png/jpg/vue..)通过loader进行解析
-
- 下载loader css-loader/less-loader/vue-loader
- 在webpack的config.js文件中的moudle/rules节点进行配置,通过test匹配后缀文件,{test: /\.css/, loader: ['css-loader']}
- plugin插件: html-webpack-plugin, 可以打包html文件,并且会自动引入打包的js文件
-
- 在webpack.config.js文件中引入插件
- 将插件放入到: webpack.config.js中plugins: []数组中, 一般插件都是构造函数,在new的时候通过参数对象进行配置
- mini-css-extract-plugin: 用于抽离css文件
import HtmlWebpackPlugin from 'html-webpack-plugin'
module.exports = {
plugins: [new HtmlWebpackPlugin({
template: '/public/index.html',
filename: 'index.html'
})]
}
babel的原理
- 将代码转换为AST语法树
- 将AST语法树进行遍历(babel-traverse),遍历的过程进行更新\添加\删除等等
- 将处理的AST语法树转为新的js代码