简介#
webpack 是前端构建工具,主要用于打包 js、css、图片等资源。
webpack 主要分为四个阶段:
- 解析:webpack 会将代码解析成抽象语法树(AST),然后通过 loader 进行处理
- 编译:通过 loader 处理完代码后,会将代码编译成目标代码
- 优化:通过插件对编译后的代码进行优化
- 打包:将编译后的代码打包成一个或多个文件
打包 js#
首先安装必要的 loader
如何处理 ts#
处理 ts 可以利用 babel 也可以利用 ts-loader
ts-loader#
babel#
处理 css 文件#
需要使用到的 loader
- style-loader
- css-loader
这里 loader 的顺序是从右到左,从后往前执行,所以先执行 css-loader,然后执行 style-loader。
css-loader 的作用是将 css 文件转化为 js 模块,然后通过 style-loader 将 js 模块插入到 head 标签中。
如何处理 less/sass/stylus#
只需要安装对应的 loader 即可
- less-loader
- sass-loader
- stylus-loader
以 less 为例
PostCSS#
PostCSS 是一款强大的 css 预处理器,它可以帮助我们实现很多功能,比如:
- 自动添加浏览器前缀
- 自动处理 css 兼容性问题
- 自动处理 css 优化问题
- ...
[!INFO]
预处理器之于 CSS,就像 TypeScript 与 JavaScript 的关系;而 PostCSS 之于 CSS,则更像 Babel 与 JavaScript。
安装
使用
PostCSS 也支持单独配置
常用的插件
- autoprefixer 自动添加浏览器前缀
- postcss-preset-env 允许使用最新 css 特性
- postcss-less 兼容 less 语法 类似的还有 postcss-sass 、poststylus
postcss 与 预处理器是可以同时使用的
处理静态资源#
处理图片#
首先安装必要的 npm 包
然后在 webpack 配置中添加如下配置
处理字体#
字体文件文件需要借助 file-loader 来处理,因为字体文件本身是无法被 webpack 处理的。
如何处理 vue 文件#
在 vue 项目中编写的代码都是.vue 后缀结尾的文件
原生 Webpack 并不能处理这种内容格式的文件,为此我们需要引入专用于 Vue SFC 的加载器
使用
Warning
vue-loader 库同时提供用于处理 SFC 代码转译的 Loader 组件,与用于处理上下文兼容性的 Plugin 组件,两者需要同时配置才能正常运行。
经过 vue-loader 处理后,SFC 各个模块会被等价转换为普通的 Javascript 模块
其中<template>
内容会被转换为用于构造 Virtual DOM
结构的 render
函数;
<script>
标签导出的对象会被转译成 Javascript 对象字面量形式。
运行页面#
vue-loader
让 webpack 可以处理 vue 文件,我们需要将页面真正运行起来的话还需要以下插件
html-webpack-plugin
自动生成 htmlwebpack-dev-server
让页面真正运行起来,并具备热更新能力
配置#
Loader 与 Plugin 的区别#
- Loader 用于转换资源,比如将 es6 转换为 es5
- Plugin 用于扩展 webpack 的功能,比如添加打包前的插件,添加打包后的插件