简介#

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 自动生成 html
  • webpack-dev-server 让页面真正运行起来,并具备热更新能力

配置#

Loader 与 Plugin 的区别#

  • Loader 用于转换资源,比如将 es6 转换为 es5
  • Plugin 用于扩展 webpack 的功能,比如添加打包前的插件,添加打包后的插件

如何使用插件#

如何使用 loader#