webpack系列学习四(loader)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。

在 require() 语句中使用 loadername! 作为前缀的方式来使用 loader，或者在 webpack 配置中配置 regex 来自动应用它们 - 请参阅 配置

常用loader学习：

less-loader

webpack 将 Less 编译为 CSS 的 loader

1. 安装：

npm install less less-loader --save-dev

2. 配置

module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssPlugin.loader, 'css-loader'] // 执行顺序：自后往前
      },
      {
        test: /\.less$/,
        use: [miniCssPlugin.loader, 'css-loader', 'less-loader'] // 执行顺序：自后往前   //! 不知为何entry为单入口的时候生成的文件没有自动引入css和js
      }
    ]
  },

Postcss-loader

使用 PostCSS 处理 CSS 的 loader

1. 安装

npm install --save-dev postcss-loader postcss

2. 配置

 {
    test: /\.less$/,
    use: [miniCssPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
  }

autoprefixer: PostCSS 插件是最流行的 CSS 处理器之一

npm i autoprefixer -D

新建文件postcss.config.js

/**
 *  postcss的配置文件
 */

module.exports = {
  plugins: [require("autoprefixer")]
}

autoprefixer插件

使用autoprefixer， 需要告知要兼容那些浏览器以及对应的版本（目标浏览器集合 browserslist） 所有的⼯具都会主动查找 browserslist 的配置⽂件，根据 browserslist 配置找出对应的⽬标浏览器集合。

Browserslist的使用方式：

• Browserslist 的配置可以放在 package.json 中 示例：兼容所有浏览器最近的2个大版本，兼容市场占有率大于1%的浏览器

"browserslist": ["last 2 versions", ">1%"]

• 单独放在配置⽂件 .browserslistrc 中。

先满足`last 2 versions`记录，然后找`>1%`的记录，
- 如果前面找到的记录里面有不满足`>1%`,则去掉，然后在向下找一个版本，如此循环，也有可能是中间就是差版本
- 如果前面找到的记录已经有2个了，但是>1%的记录还有别的，则追加上去


last 2 versions
>1%

集合校验：

npx browserslist "last 1 version, >1%"

and_chr 102   // chrome 安卓浏览器，安卓系统上的chrome浏览器
and_ff 101  // firefox 安卓浏览器
and_qq 10.4
and_uc 12.12
android 101 // 安卓系统自带浏览器
baidu 7.12 // 百度浏览器 桌面端
bb 10 // 黑莓
chrome 102
chrome 101
chrome 100
edge 102
edge 101
firefox 101
firefox 100
ie 11
ie_mob 11 // ie移动端的浏览器
ios_saf 15.5
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 14.5-14.8
kaios 2.5
op_mini all
op_mob 64
opera 86
safari 15.5
safari 15.4
samsung 17.0

Browserslist常见声明集合

• last 2 versions
• >1%
• Chrome>59 ie6-8 指定某个浏览器版本范围 ie<11
• Not 排除 not ie<11 排除ie11以下的浏览器
• dead 市场使用率低于且官方不在维护（两年+） npx browserslist "dead"

cssnano插件

是一个模块化的 CSS 缩小器 npm install cssnano -D