css-loader

1.为什么需要loader

默认情况下，webpack是不能处理非js的内容的，因为它并不是一个模块，所以就需要loader把图片、css、文件等转换成js，然后进行打包操作。

2.loader是什么

loader其实也是一个模块。

3.css-loader

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      // 写法1
      // {
      //   test: /\.css$/,
      //   include: path.resolve(__dirname, "src"),
      //   loader: "css-loader",
      // },
      // 写法2
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader: "css-loader",
      //     },
      //   ],
      // },
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

test:一般就是一个正则表达式，用于匹配需要处理的文件类型；

style-loader

作用：将处理好的css样式放在header中的style标签中。

const path = require("path");

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

loader的执行顺序是从数组的最后开始往前直行，上面的代码中会先执行css-loader然后再执行style-loader。

less-loader

less：less的作用是把less文件转为css文件。

# 将login.less转换为index.css
npx less ./src/css/login.less index.css

less-loader的作用就是为你自动执行上面的命令，来把所有的.less文件转换为.css文件。

const path = require("path");

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

less-loader自动执行less命令将less文件转换为css文件；
css-loader将css文件转为js文件，作为模块加载到依赖图中；
style-loader将css加载到html的header中。

postcss

postcss就是利用javascript转换样式的工具(独立的工具)。

postcss不能直接用npx postcss，需要安装postcss-cli

 npx postcss -o ret.css ./src/css/test.css

将test.css用postcss处理，处理后发现代码根本没有变化。这是因为postcss是一个纯工具，要实现目标，需要使用postcss的插件。

这里使用autoprefixer插件：

npx postcss --use autoprefixer  -o ret.css ./src/css/test.css

处理后发现css代码中有的样式添加了前缀。

postcss-loader

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        use: [
          "style-loader",
          "css-loader",
          // 使用方式在这里
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("autoprefixer")],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

postcss-preset-env

预设 -- 插件的集合

解决的问题：现在autoprefixer插件可以解决属性前缀的问题，那么又来个需求，要解决八位颜色转换为rgba的问题，那么此时不得不再安装另一个插件。

postcss-preset-env就相当于一个常见插件的集合，安装一个顶十几个。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["postcss-preset-env"],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

为了避免重复写下面这段代码：

{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: ["postcss-preset-env"],
        },
    },
}

可以将插件抽离：

// postcss.config.js
module.exports = {
  plugins: ["postcss-preset-env"],
};

这样，在每次使用postcss-loader的时候都会去postcss.config.js中查看要用的plugins