Webpack入门（loader预处理器）三

一、Webpack loader简介

Loader是Webpack生态里一个重要的组成，我们一般称之为预处理器。

Webpack在进行打包的时候，对所有引入的资源文件，都当作模块来处理。

但Webpack自身只支持对JS文件处理（现在的版本也支持对JSON文件处理），如果你引入了一个CSS文件或图片文件，那么Webpack在处理该模块的时候，会在控制台报错：

Module parse failed…You may need an appropriate loader to handle this file type.

控制台告诉你模块解析失败，你需要你个合适的loader来处理该文件类型。

当Webpack自身无法处理某种类型的文件的时候，我们就可以通过配置特定的loader，赋予Webpack来处理该类型文件的能力。

二、Webpack loader使用

新建项目文件夹名是webpack1-3，然后执行下面的命令超速初始化项目：

npm init -y

新建相应的文件，目录结构如下。

b.css声明了.hello类，该类的文字颜色是蓝色;

a.js引入了b.css;

webpack.config.js是Webpack的配置文件，从a.js入口打包，输出bundle.js文件；

index.html引入了打包后的bundle.js文件，并且有一个clss为hello，内容是Hello, Loader的div。

a.js

import './b.css'

b.css

  .hello {
    margin: 30px;
    color: blue;
  }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="bundle.js"></script>
</head>
<body>
    <div class="hello">Hello, Loader</div>
</body>
</html>

webpack.config.js

  const path = require('path');
  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

与快速实例一节一样，我们安装webpack

  npm install --save-dev webpack@4.43.0    webpack-cli@3.3.12

然后执行npx webpack打包，这个时候报错了，提示我们需要安装相应的loader来处理CSS文件。

这里我们安装两个loader，分别是css-loader与style-loader。

其中css-loader是必需的，它的作用是解析CSS文件，包括解析@import等CSS自身的语法。它的作用也仅仅是解析CSS文件，它会把CSS文件解析后，以字符串的形式打包到JS文件中。不过，此时的CSS样式并不会生效，因为我们需要把CSS插入到html里才会生效。

此时，style-loader就来发挥作用了，它可以把JS里的样式代码插入到html文件里。它的原理很简单，就是通过JS动态生成style标签插入到html文件的head标签里。

我们来安装这两个loader

  npm install css-loader@3.6.0 style-loader@1.2.1

webpack.config.js里配置上这两个loader

const path = require('path');

module.exports = {
    entry: './a.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'bundle.js'
    },
    //webpack并不具备解析文件除js以外文件的能力（webpack4现可以处理json文件）
    //因此配置项需要新增module，该项是一个对象
    module:{
        //rules里是我们对各个类型文件的处理规则配置
        rules:[
           //安装两个loader处理  npm install css-loader@3.6.0 style-loader@1.2.1
           //css-loader是必需的，它的作用是解析CSS文件，包括解析@import等CSS自身的语法
           //style-loader则通过JS动态生成style标签将解析后的css插入到html文件的head标签里
           //test值是一个正则表达式，筛选后缀为.css的文件，使其使用对应use项里的loader
           //use值是一个数组，每一项是一个loader
           //*注意！！！*loader的执行顺序是从后向前执行
           //先执行css-loader，然后将执行的结果交给style-loader执行
           {test: /\.css$/, use: ['style-loader','css-loader']}
        ]
    },
    mode: 'none'
};

可以看到，我们需要对配置项新增module，该项是一个对象，其rules里是我们对各个类型文件的处理规则配置。

test值是一个正则表达式，表示当文件名后缀是.css的时候，我们使用对应use项里的loader。

use值是一个数组，每一项是一个loader。loader的执行顺序是从后向前执行，先执行css-loader，然后把css-loader执行的结果交给style-loader执行。

现在我们执行npx webpack来完成打包，然后在浏览器打开index.html，发现CSS生效了，文字颜色变成蓝色。

三、小结

loader就是帮助Webpack来处理各种类型文件的，其执行顺序是从后向前。后续章节我们会学习到前端开发中必用的loader 。