webpack4实战五--loader入门(css篇)

之所以要使用loader装载器，是因为webpack默认只打包js，想要打包css、img等文件就需要借助loader来实现

 重点：想要打包css这些的话，不止需要对应的loader，还要通过js去引用这些css啥的文件，不然打包出来的还是只有js文件的。

打包css需要使用css-loader，因此，先安装css-loader

一、安装css-loader以及使用

1.1 安装css-loader

npm i -D css-loader

1.2 使用css-loader

使用css-loader的话，需要在webpack.config.js的module字段中的rules处进行配置，如下：

const path = require('path');
let HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  ...
  module: {
    rules: [
      {
        test:/\.css$/,
        use:['css-loader']
      },
    ]
  },
  ...
};

写一个测试用的css文件，随便起个名字叫b.css吧

body{background:red}

现在如果我们进行打包的话，我们还是无法将css打包的，因为我们的打包入口是js文件，需要通过引用关系才能将对应的css打包进去

在这个示例中，我们可以在a.js中使用import导入css文件。如下

console.log(1);
import css from "./b.css";

在这里我们便可以执行npm start（上一篇文章中我有讲过，如果没有看上一篇的话，直接使用npx webpack serve吧）进行css打包，可以看到打包后的文件如下

很明显，现在我们是打包了css文件，但是，这里显示的就是两个js而已，那在html文件中是否有引用这个打包好的css？

 很明显，没有。

二、自动在html中添加css引用（style-loader）

打包好的css便需要使用style-loader直接将css添加到html的style标签里面

同样的需要先安装

2.1 安装style-loader

npm i -D style-loader

使用方式与css-loader类似，在css-loader的基础上进行添加，如下

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

2.1.1 装载器的执行顺序

在这里需要注意，style-loader和css-loader的写入顺序是要注意的，因为webpack执行的时候是从右到左，use:['style-loader','css-loader']也就是从右边先读取到css-loader再然后才是style-loader，因为我们是要先进行css打包后才将其添加到html文件中的。