码路教育

02-Webpack打包常见资源

7/26/2022

# 1. 打包CSS

打包非JS文件，我们需要安装一个loader来处理此文件

  • 打包css时，可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
  • 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能
  • loader 可以用于对模块的源代码进行转换，对于加载css文件来说，我们需要一个可以读取css文件的loader
  • 使用css-loader来读取css文件，安装：npm install css-loader -D

css-loader的使用方案

  • 内联方式（了解），使用较少，不方便管理
    • 在引入的样式前加上使用的loader，并且使用!分割；
    • import "css-loader!../css/out.css"
  • 配置方式(重点掌握)

loader配置

  • module.rules中允许我们配置多个loader
  • 配置形式管理loader，方便后期的维护，同时也让你对各个Loader有一个全局的概览
  • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式
  • use属性：对应的值时一个数组
  • use: [ 'css-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'css-loader'} ]

认识style-loader

通过css-loader来加载css文件了, 但是发现这个css在我们的代码中并没有生效（页面没有效果），因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中，我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader

  • 安装style-loader npm install style-loader -D

配置style-loader

  • 在配置文件中，添加style-loader
  • 因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面
  • 重新执行编译npm run build，可以发现打包后的css已经生效了

# 2. 打包Less

在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高

less-loader处理 less文件

  • less-loader需要使用less工具来转化less
  • 安装：npm i less less-loader -D
  • 使用less-loader，来自动使用less工具转换less到css

# 3. PostCSS工具

什么是PostCSS呢

  • PostCSS是一个通过JavaScript来转换样式的工具
  • 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
  • 实现这些功能，我们需要借助于PostCSS对应的插件

使用PostCSS

  • 第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
  • 第二步：选择可以添加你需要的PostCSS相关的插件

在webpack中使用postcss就是使用postcss-loader来处理的

  • 安装postcss-loader npm install postcss-loader -D
  • 修改加载css的loader，postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin
  • 安装添加前缀的插件 npm install autoprefixer -D

单独配置文件管理

  • 在根目录下创建postcss.config.js
  • 将这些配置信息放到一个单独的文件中进行管理

postcss-preset-env

  • 在配置postcss-loader时，我们配置插件并不需要使用autoprefixer
  • postcss-preset-env也是一个postcss的插件，将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill
  • 会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）
  • 安装：npm install postcss-preset-env -D

# 4. 打包图片

  • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader
  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader

  • asset/resource 发送一个单独的文件并导出 URL，之前通过使用 file-loader 实现；
  • asset/inline 导出一个资源的 data URI，之前通过使用 url-loader 实现；
  • asset/source 导出资源的源代码，之前通过使用 raw-loader 实现
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择，之前通过使用 url-loader，并且配置资源体积限制实现

asset module type的使用

  • 加载图片，我们可以使用下面的方式：
{
    test:/\.(png|svg|jpg|jpeg|gif)$/i,
    type:"asset/resource"
}
1
2
3
4

自定义文件的输出路径和文件名

  • 方式一：修改output，添加assetModuleFilename属性；
  • 方式二：在Rule中，添加一个generator属性，并且设置filename；

最常用的placeholder

  • [ext]： 处理文件的扩展名
  • [name]：处理文件的名称；
  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）

# 5. 资源模块类型的limit

开发中将小的图片进行转换，大的图片直接使用图片

  • 因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
  • 大的图片也进行转换，反而会影响页面的请求速度

实现步骤

  • 步骤一：将type修改为asset；
  • 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

# 6. babel打包JS高级语法

  • 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
  • 学习Babel对于我们前端开发来说，非常重要

Babel到底是什么

  • Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
  • 包括：语法转换、源代码转换等；

Babel命令行使用

  • babel本身可以作为一个独立的工具（和postcss一样），可以单独使用
  • 在命令行尝试使用babel，需要安装如下库
  • @babel/core：babel的核心代码，必须安装， @babel/cli：可以让我们在命令行使用babel
  • npm install @babel/cli @babel/core -D
  • 使用babel来处理我们的源代码
  • npx babel src --out-dir dist

插件的使用

  • 转换箭头函数，那么我们就可以使用箭头函数转换相关的插件
  • npm install @babel/plugin-transform-arrow-functions -D
  • npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

let/const转成var

  • 使用 plugin-transform-block-scoping 来进行转化
  • npm install @babel/plugin-transform-block-scoping -D
  • npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

Babel的预设preset

  • 如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）
  • 预设说白了，就是插件的集合
  • 安装：npm install @babel/preset-env -D
  • 使用：npx babel src --out-dir dist --presets=@babel/preset-env

babel-loader

  • 在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中
  • 安装依赖：npm install babel-loader -D （之前已经安装了@babel/core，那么不需要再次安装）
  • 配置规则，在加载js文件时，使用我们的babel

babel-preset

  • 一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。
  • 常见的预设有三个：env，react，TypeScript
  • 安装preset-env：npm install @babel/preset-env

# 7. 打包vue代码

要使用vue，需要安装vue

  • npm i vue@next

安装vue-loader， @vue/compiler-sfc

  • npm i vue-loader
  • npm i @vue/compiler-sfc
Last Updated: 12/25/2022, 10:02:14 PM

03-Webpack常见插件