乐趣区

关于前端:webpack是如何处理cssless资源的呢

jiezi

上一篇文章 体验了 webpack 的打包过程，其中 js 文件不须要咱们手动配置就能够胜利解析，可其它类型的文件，比方 css、less 呢？

css-loader

首先，创立一个空文件夹，通过 npm init -y 初始化我的项目，我的项目构造如下 

demo
├─ src
│   ├─ css
│   │   └─ index.css
│   ├─ js
│   │  └─ component.js
│   └─ index.js
├─ index.html
└─ package.json

在 component.js 中创立一个 div 元素并设置 class，index.css 中 定义款式，最初在 index.js 中引入 component.js 及 index.css 文件 

// component.js
const divEl = document.createElement("div");
const text = document.createTextNode("hello webpack");
divEl.appendChild(text);
divEl.setAttribute("class", "element");
document.body.appendChild(divEl);

// index.css
.element {
  font-size: 20px;
  font-weight: bold;
}

// index.js
import "./js/component";
import "./css/index.css";

在 package.json 中配置 build 指令后，应用 npm run build 运行我的项目

但此时是不能被编译通过，它报错提醒“You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.”

用于解决 css 资源的 loader 是 css-loader。npm i css-loader -D 在我的项目中装置后，在我的项目根目录新建 webpack.config.js 文件，在 module 对象中 rules 里配置，test 通过正则表达式匹配文件后缀，use 示意应用的 loader。

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

再次 npm run build 运行我的项目，此时曾经能够编译通过了~

index.html 引入打包后的 bundle.js，通过 Live Server 运行 html 文件

style-loader

能够在 html 页面中看到 div 标签，但 css 没有失效，这是因为 css-loader 只负责解析 css，但不会将 css 插入到页面中，这个操作须要 style-loader 来实现。

通过 npm i style-loader -D 装置后，在 webpack.config.js 中配置。

对于 css 文件，须要先通过 css-loader 解析后再通过 style-loader 插入页面。而 loader 的执行程序是从后往前，所以 style-loader 放在 css-loader 后面。

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

此时 css 文件中的款式就能够失效啦，能够看到 style-loader 的作用就是创立了一个 style 标签，并将 css-loader 解析完的 css 内容插入

less-loader

在 css 文件夹下减少一个 index.less 文件，在 index.js 中引入 

// index.less
@color: red;

.element {color: @color;}

// index.js
import "./css/index.less";

运行后同样会提醒没有适合的 loader

解决 less 文件应用 less-loader，但实际上 less-loader 须要借助 less 这个工具，间接通过 less 工具就能够将 less 文件里的代码解决为浏览器可辨认的 css 代码

执行 npx less ./src/css/index.less > ./src/css/revert.css 命令应用 less 工具将 index.less 文件解析成 revert.css

在 webpack.config.js 中只须要将 less-loader 配置上就行，less-loader 须要最先将 less 资源解决成 css，所以搁置最初面 

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },

从新编译后就能够浏览器上看到 less 设置的款式失效啦，以及 css 和 less 别离应用 style-loader 创立了两个 style 标签。

PostCSS

PostCSS 是一个通过 JavaScript 来转换款式的工具，帮忙咱们进行一些 CSS 的转换和适配，比方主动增加浏览器前缀、css 款式的重置，然而 PostCSS 不能间接实现，须要借助对应的插件。

比方以下 css 代码，某些浏览器可能不兼容，本人手动增加浏览器前缀使之兼容也能够，但太过麻烦，而且也不晓得须要兼容哪些版本的浏览器，应用工具是比拟好的计划。

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

通过 postcss-cli 能够对文件进行解析解决，通过指令 npx postcss -o result.css ./src/css/component.css 进行编译

尽管编译没有报错，然而编译后并没有对文件进行兼容解决，因为没有指定插件，别离指定两种插件，来看看编译后果 

npx postcss --use autoprefixer -o autoprefixer.css ./src/css/component.css
npx postcss --use postcss-preset-env -o preset.css ./src/css/component.css

autoprefixer 只负责减少浏览器前缀
postcss-preset-env css 做转换，如 16 进制色彩转换成 rgb，并且内置了 autoprefixer

postcss-loader

在 webpack 环境下，应用 postcss-loader 来对 css 进行兼容性的解决，同时须要配置插件，autoprefixer 和 postcss-preset-env 都能够。

{
    test: /\.css$/,
    use: [
      "style-loader",
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {plugins: [require("postcss-preset-env")],
          },
        },
      },
    ],
  },

增加前缀和款式转换后的代码就能够被增加到浏览器中

browsersList

通过 postcss 对 css 代码兼容性进行了解决，但咱们能够看到下面定义了 css3 中的属性 transition，某些浏览器有可能存在兼容性问题，但在这里没有增加浏览器前缀。

这是因为没有指定浏览器兼容版本，对于编译反对的浏览器版本采取了默认配置，默认配置中的浏览器曾经都可能反对 transition 属性。

咱们能够通过 browsersList 来指定浏览器兼容性版本，可配置在 package.json 或者 .browserslistrc 文件中 

> 0.1%,
last 4 version,
not dead

.browserslistrc 文件配置示意浏览器使用率大于 0.1%，每个浏览器的最初四个版本、以及没有“死亡”的浏览器，扩充了须要兼容的浏览器版本。

此时编译后的代码就会帮咱们增加浏览器前缀。

webpack 解决款式资源，通过 css-loader、style-loader 解析 css 语法 browsersList、postcss 形式，解决兼容性问题。

以上是和款式资源无关的编译配置，更多无关 webpack 的内容能够参考我其它的博文，继续更新中~

退出移动版