webpack系列教程之前端常见loader

来瓶二锅头00
203 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。

上一章中我们说到了loader的基础使用方法。这一章我们将一起看看前端常见的loader.

样式loader

样式是我们前端基础的东西，并且随着发展，各种各样的预处理，例如：less,sass。因此需要的loader越来越多。下面我们从几个维度来看看都有哪些loader，以及其简单使用，具体详解后续后有专门的篇章介绍哦

postcss-loader

此loader是扩展css语法，使用下一代css。同时支持压缩css文件。例如我们在日常工作中写transform,一般都需要增加前缀处理，但是通过此loader,我们其实就不需要手动的去写，因为在编译的时候会自动处理。

  1. 安装
npm install -d postcss-loader postcss
  1. 使用。当前使用有两种方式，第一种就是在webpack.config.js中使用。例如：
module.exports = { 
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader',{
                loader:'postcss-loader',
                options:{
                    postcssOptions:{
                        // 所需要的配置
                    }
                }
            }]
        }]
    }
};

但是由于这个loader的功能比较强大，所以的配置项比较多，因此一般会在项目中单独配置，也就是第二种使用方法。

在项目根目录下创建一个postcss.config.js文件。在文件中配置所需要的配置信息。例如：

module.exports = {
    plugins:[],
    parser:'sugarss',
    map:true,
    exec:true,
    syntax:'sugarss',
    stringifier:'mindas'
}

然后修改webpack.config.js中的配置

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

上面两种方式都是支持的。根据自己的喜好来处理

sass-loader less-loader

顾名思义，将sass以及less文件格式数据转换成css格式，两者的配置以及功能相同，因此一起说明

  1. 安装
npm install -d less-loader sass-loader
  1. 在webpack.config.js中配置所相应的loader,例如：
module.export = {
    module:{
        rules:[{
            test:/\.scss$/,
            use:['style-loader','css-loader','sass-loader']
        }]
    }
}

上面的配置会将项目中的.scss文件，通过sass-loader转换成css格式文件

css-loader

css-loader是将css文件转成一个数组。此数组是项目中的css文件被识别和要转换成js文件的数据。原理是css-loader能够将@import和url()的方法转换为require的功能，将样式引入。然后进行计算。

  1. 安装
npm install -d css-loader
  1. 在webpack.config.js中配置
module.export = {
    module:{
        rules:[{
            test:/\.scss$/,
            use:[{
                loader:'css-loader',
                options:{

                }
            }]
        }]
    }
}

但是我们可以试试就这样配置能正常使用吗？答案是否定的，为什么呢？因为他转换成的数据是不被webpack所接收的。这个时候就需要他的好朋友style-loader出马了。

style-loader

style-loader通过一个js脚本创建一个style标签。然后将css-loader中转换的样式加入到页面中。同上面的css-loader一样是无法单独使用的。两者是'孪生兄弟'。因此当我们项目中如果需要使用对css样式转换的的时候，必须先用css-loader解析文件。然后通过style-loader的方法来讲css解析为最终的一个css，创建一个style标签。插入到head中。使用方法相同，就不写示例了。

编译转换

babel-loader

将ES5+的文件在构建的时候通过babel转换成ES5文件。使得webpack能够进行处理

  1. 安装
npm install -D babel-loader @babel/core @babel/preset-env webpack
  1. 在webpack.config.js中配置
module.export = {
    module:{
        rules:[{
            test:/\.js$/,
            exclude: /(node_modules|bower_components)/,
            use:[{
                loader:'babel-loader',
                options:{
                }
            }]
        }]
    }
}

上述的配置在构建的时候，会将除了node_modules以及bower_components文件中的js文件全部通过babel-loader进行转换，转换成ES5语法。

ts-loader

将ts格式文件转换成js格式文件

文件处理

file-loader

将文件上的引入（import和require）解析成url，并且将所引入的文件发送到所配置的目录中。

url-loader

url-loader内部封装了一个file-loader。能够实现file-loader的功能。但是有一个区别，那就是当文件大小低于配置中设置的限制后，会将文件转换成base64格式。并且返回一个DataURL.

raw-loader

将文件的原始内容转换成字符串并返回

格式校验

eslint-loader

未完待续

avatar
文章
阅读
粉丝