webpack功能
模块化支持、代码压缩混淆、处理js兼容问题、性能优化
什么是webpack?
本质上,webpack是javascript应用程序的静态模块打包器。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle
webpack像一条生产线,经过一系列处理流程后将源文件转换为输出结果;每个处理流程都是单一作用,多个流程之间存在依赖关系,只有完成当前的流程才能继续处理下一个流程。
webpack构建流程
- 初始化参数:从配置文件
- 开始编译:加载所有配置的插件,执行对象的run方法开始编译
- 确定入口:根据配置文件的entry找到所有的入口文件
- 编译模块:从入口文件出发,调用所有配置的loader对模块进行翻译,再找出模块的依赖模块,递归完成本步骤,直到所有入口依赖文件都经过编译处理
- 完成编译模块:得到每个模块翻译之后的最终内容,以及之间的依赖关系
- 输出资源:根据模块之间的依赖关系,组装成一个个包含多个模块的chunk,再把每个chunk转换为一个单独的文件加入到输出列表。这是最后可以修改输出内容
- 输出完成:根据配置确定输出路径和文件名,把文件写入到文件系统
webpack加载器的使用loader
- 1.打包处理css文件
1)安装loader: npm install style-loader css-loader -D
2)在webpack.config.js配置文件中添加:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
test:表示匹配的文件类型 use:表示对应要调用的loader(顺序是固定的,从后往前调用)
-
2.打包less文件
1)npm i less-loader less -D
2){ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] } -
3.打包scss文件
-
4.配置postCSS自动添加css的兼容前缀
- 5.打包样式表中的图片和字体文件
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" }
limit指定图片的大小 只有小于limit大小的图片,才会被转为base64图片
- 6.打包js文件中的高级语法
1)安装babel转换器相关的包
2)安装babel语法插件相关的包
3)创建babel配置文件babel.config.js
4)添加loader规则