webpack（二）样式文件兼容及打包

Webpack中提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。

一、loader简介

由于Webpack打包入口目前只配置了一个index.js文件，那么其他需要被打包的文件都必须通过模块化方式引入该文件才行，而默认情况下，引入的文件必须是js文件（如上面添加的module.js）。

那么其他文件类型该如何进行打包呢？

这时我们就要用到Webpack中所提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。

其中CSS文件的打包需要用到css-loader和style-loader两个loader

• css-loader只是用于加载css文件（并没有添加到页面）
• style-loader则是将打包后的css代码以<style>标签形式添加到页面头部。

二、loader的配置方式

module 中通过 rules 来配置 loader 的规则，对应的是一个数组，数组中是一个个 Rule 对象，可以设置多个属性。

1、test 属性，表示匹配的规则，通常用正则表达式

2、use 属性，对应的是一个数组

数组中可以存放对象

• loader 属性，字符串，表示使用哪个loader处理资源
• options 属性，字符串或者对象，附加内容，值会传递到 loader 中

数组中还可以存放字符串，表示使用的 loader，如 use: ["css-loader"]

3、loader 属性，当只有一个loader时的省略写法

4、 多个loader配合使用时，处理顺序是：从下到上，从右到左、从后往前 的顺序；

三种配置方式都是存在的，可以根据不同的配置场景灵

第一种

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

第二种

在loader的配置中，除了看到以上 use 数组中存放字符串，也可能有存放对象的写法，使用对象形式时，通常会使用 options 传递参数

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
        ],
      },
    ],
  },
};

第三种

因为只存在一个loader，且无需传参处理时，所以可能直接将 use 简写为 loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "css-loader",
      },
    ],
  },
};

三、css文件打包

（1）安装

npm i css-loader style-loader -D

（2）说明

css-loader和style-loader关系原理及作用：

• css-loader： 是帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css；
• style-loader： 是将css-loader打包好的css代码以<style>标签的形式插入到html文件中
• 使用css-loader必须要配合使用style-loader；

（3）配置

module.exports = {
    ...  //  此处省略无数行，已有的的其他的内容

  // loader配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同loader
            {
                // 匹配css文件
                test: /\.css$/,
                // 使用哪些loader文件进行处理
                use: [
                    // use数组中loader执行顺序：从后往前
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]
    }
 }

四、less文件打包

（1）安装

npm i less less-loader -D

####（2）说明

• less-loader 用于处理编译 .less文件，将其转为css文件代码
• 使用less-loader 的话必须安装less，单独一个less-loader是没办法正常使用的

（3）配置

module.exports = {
    ...  //  此处省略无数行，已有的的其他的内容

  // loader配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同loader
           {
                //匹配less文件
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader 和 less
                    'less-loader',
                ]
            }
        ]
    }
 }

五、sass文件打包

（1）安装

npm i sass-loader node-sass -D

####（2）说明

• scss-loader 用于处理编译 .less文件，将其转为css文件代码
• 使用scss-loader 的话必须安装node-sass，单独一个scss-loader是没办法正常使用的

（3）配置

module.exports = {
    ...  //  此处省略无数行，已有的的其他的内容

  // loader配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同loader
           {
                //匹配less文件
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载sass-loader 和 node-sass
                    'sass-loader',
                ]
            }
        ]
    }
 }

六、前缀兼容浏览器

（1）浏览器市场占有率

我们工具通常会查询的一个网站就是caniuse；
https://caniuse.com/usage-table

（2）.browserslist的详解

作用：

这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置

使用方法:

• 1、package.json 配置

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

• (2) .browserslistrc 文件

在根目录新建 .browserslistrc 文件

# Browsers that we support 
 
last 1 version
> 1%
maintained node versions
not dead

Browserslist 的数据都是来自Can I Use的。如果你想知道配置语句的查询结果可以使用 https://browserl.ist/

编写规则：

你可以用如下查询条件来限定浏览器和 node 的版本范围（大小写不敏感）：

• > 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。

• > 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。

• > 5% in alt-AS : 同上，只是使用地区变为亚洲所有国家。这里列举了所有的地区码。

• > 5% in my stats : 使用定制的浏览器统计数据。

• cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。

• cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。 `

• cover 99.5% in my stats : 使用定制的浏览器统计数据。

• maintained node versions : 所有还被 node 基金会维护的 node 版本。

• node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。

• current node : 当前被 browserslist 使用的 node 版本。

• extends browserslist-config-mycompany : 来自browserslist-config-mycompany包的查询设置

• ie 6-8 : 选择一个浏览器的版本范围。

• Firefox> 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。

• ios 7 : ios 7自带的浏览器。

• Firefox ESR : 最新的火狐 ESR（长期支持版） 版本的浏览器。

• unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。

• last 2 major versions or last 2 ios major versions : 最近的两个发行版，包括所有的次版本号和补丁版本号变更的浏览器版本。

• since 2015 or last 2 years : 自某个时间以来更新的版本（也可以写的更具体since 2015-03或者since 2015-03-10）

• dead: 通过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。

• last 2 versions :每个浏览器最近的两个版本。

• last 2 Chrome versions :chrome 浏览器最近的两个版本。

• defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。

• not ie <= 8 : 浏览器范围的取反。

可以添加 not 在任和查询条件前面，表示取反

验证 browserslist：

那么我们如何知道这个配置都兼容是什么，官方也提供了查询
例如我们有如下配置：

"browserslist": [
  ">0.2%",
  "not dead",
  "not op_mini all"
]

然后运行：

npx browserslist    # 打印出所有浏览器版本支出情况，

（3） 支持的插件

Browserslist这个东西单独是没用的（补充: 在vue官方脚手架中，browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。）

下面的搭配的工具列表：

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize

七、PostCSS的使用

官网：https://www.postcss.com.cn/

介绍：
postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。
postcss本身是一个功能比较单一的工具。
利用postcss可以实现一些工程化的操作，比如：自动添加浏览器前缀，代码合并，代码压缩等。

（1）安装

npm install postcss postcss-cli postcss-loader postcss-preset-env -D

编写一个需要添加前缀的css:

• https://autoprefixer.github.io/
• 我们可以在上面的网站中查询一些添加css属性的样式

（2）说明

• postcss-loader ： 使用 postcss 需要使用 postcss-loader 来处理

• postcss-preset-env： 是postcss的插件，帮助转成大多数浏览器认识的css，并且会根据目标浏览器或者运行时环境添加所需要的polyfill；内置了autoprefixer

（3）配置

• 根目录新建 postcss.config.js文件 内容如下：

module.exports = {
  plugins: [
    'postcss-preset-env'
  ]
}

• webpack的配置见下面 配置及示例

八、配置及示例

目录结构

webpack.config.js

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build")
  },
  module: {
    rules: [
      { 
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader", 
          // 为了回头处理@import的css文件，写成对象
          {
            loader: "css-loader",
            options: {
              importLoaders: 1 
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              // @import的css文件，回头能被前面的"less-loader"、"postcss-loader"处理
              importLoaders: 2 
            }
          },
          // less-loader 先将less语法转成css 再做兼容性处理
          "postcss-loader",
          "less-loader"
        ]
      }
    ]
  }
}

.browserslistrc

>1%
last 2 version
not dead

postcss.config.js

module.exports = {
  plugins: [
    'postcss-preset-env'
  ]
}

例子

main.js

import { sum, mul } from './js/math.js';
const { dateFormat, priceFormat } = require('./js/format');
import "./js/test";
import "./js/component";

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat("1213"));
console.log(priceFormat("1213"));

component.js

// import "css-loader!../css/index.css";
import "../css/index.css";
import "../css/component.less";

function component() {
  const element = document.createElement("div");
  element.innerHTML = ["Hello", "Webpack"].join(" ");
  element.className = "content";
  return element;
}

document.body.appendChild(component());

component.less

@fontSize: 50px;
@fontWeight: 700;

.content {
  font-size: @fontSize;
  font-weight: @fontWeight;
}

index.css

@import "./test.css";

.demo {
  color: red;
}

test.css

.content {
  /* 十六进制通常是写几位 */
  color: #12345678;
}

:fullscreen {
  color: red;
}

.content {
  user-select: none;
  transition: all 2s ease;
}