04_webpack-常用的loader

loader是什么?

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

loader可以用于对模块的源代码进行转换
我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
在加载这个模块时，webpack其实并不知道如何对其模块进行加载，我们必须制定对应的loader来完成这个功能

css-loader的使用

当我们需要在js文件中动态的去创建一个HTML元素，并且给这个元素一个样式，那么我们可以单独创建一个css文件夹里面包含一个xxx.css在当前文件中引入

这么做会发生什么？
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

上面的错误信息告诉我们需要一个loader来加载这个css文件

下载 css-loader

npm i css-loader -D

 

loader的两种使用方案

内联方式
import 'css-loader!../css/index.css';

 

配置方式
在我们的webpack.config.js文件中写明配置

module.rules(规则)中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)

rules对应的是一个数组，数组里面是一个一个的[rule](规则)对象

rule对象里面的属性：
　　test属性:用于对resource(资源)进行匹配的，通常会设置正则表达式；
　　use属性:对应的是数组[UseEntry]
　　　　UserEntry：对应的又是一个对象，可以通过对象的属性来设置一些其他属性
　　　　　　loader:必须有一个loader属性，对应的值是一个字符串
　　　　　　options:可选的属性，值是一个字符串或者对象，值会被传入到loader中；
　　　　　　query:目前已经使用options来替代
　　　　传递字符串(如：use:['style-loader'])是loader属性的简写方式如[{loader:'style-loader'}]

 module: {
    rules: [
      {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          {
            loader: 'css-loader'
          }

          //第一种的简写
          // "css-loader"
        ]
        // 第一种的简写，use只应用一个loader的时候
        // loader: 'css-loader'
      }
    ]
  }

 

style-loader

我们已经可以通过css-loader来加载css文件了
　　但是你会发现这个css在我们的代码中并没有生效(页面没有效果)

这是为什么呢？
　　因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中
　　如果我们希望再完成插入style的操作,那么我们还需要另外一个loader，就是style-laoder

安装style-laoder　　npm i style-loader -D

 

 

 

loader的处理顺序

  module: {
    rules: [
      {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  }

loader的处理顺序都是从后往前的

 

 

less-loader和postcss-preset-env

如何对less文件进行转换？

less-loader依赖less工具进行转换

安装  npm i less less-loader -D 

      {

        test: /\.less$/,

        use: [

          "style-loader",

          {

            loader: "css-loader",

            options: {

              //相对于，当你解析到@import之后的话，再回头使用前面的几个loaders再进行处理一次

              // 0 :当你解析文件的时候发现了@import语句只会被当前loader处理，不会被前面的loader处理

              // 1 :当解析到@import语句的时候，使用前一个loader再处理一次

              // 这里需要填你需要被前面几个loader进行处理

              // 2：当我发现@import的是less文件的时候，再使用前面两个loader处理一次

              importLoaders: 2

            }

          },

          "postcss-loader",

          "less-loader"

        ]

      }

 当你读到我希望你们再看一下这两篇文章，这会让你对loader中的插件适配不同浏览器，和postcss-preset-env有一定的理解

02_webpack--Browserslist - Mr-Hou88888 - 博客园 (cnblogs.com)

03_webpack-postcss - Mr-Hou88888 - 博客园 (cnblogs.com)

 

postcss-loader:帮我们转换现代的css特性，转换成大部分浏览器都识别的css

css-loader:把css转换成js，并且处理依赖关系

style-loader:css-loader处理好的css加入到html中

file-loader

当我们要处理一些jpg、png等格式的图片，我们也需要有对应的loader:file-loader

　　file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中；

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false
            },
          }
        ],
        type: 'javascript/auto'
      }

为什么我这里的配置esModule为false 还要加入 type:'javascript/auto'  file-loader的踩坑 - Mr-Hou88888 - 博客园 (cnblogs.com)

 

修改生成的图片名字和路径

默认生成的图片名称是使用md4算法(128长度的字节值)来命名的
那么我们就不知道我原本的图片和导出的图片的对应关系
比如保留原来的文件名、扩展名、同时为了防止重复，包含了一个hash值等
我们可以在配置中使用PlaceHolder来完成
https://webpack.js.org/loaders/file-loader/#placeholders

常用的placeholder
　　[ext] : 处理文件的扩展名 如 原来文件的.jpg
　　[name]:处理文件的名称
　　[hash]:文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值(32个十六进制)
　　[contentHash]:在file-loader中和[hash]结果是一致的(在webpack的一些其他地方不一致)
　　[hans:<length>]:截取hash长度,默认32个字符过长
　　[path]：文件相对于webpack配置文件的路径

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
              //直接在这里指定文件夹和文件名，vue脚手架也是一样的
              name: 'img/[name].[hash:5].[ext]',
            },
          }
        ],
        type: 'javascript/auto'
      }

第二种指定文件夹的方式

{
            loader: 'file-loader',
            options: {
              esModule: false,
              //直接在这里指定文件夹和文件名，vue脚手架也是一样的
              name: '[name].[hash:5].[ext]',
              outputPath: 'name'
            },
          }

 

 

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的data，直接嵌入到出口文件中去了(bundle.js)

安装：url-loader

npm i url-loader -D

使用url-loader
由于 url-loader 包含了 file-loader 所以，file-loader 内的 option 在 url-loader 中均能使用。

直接将file-loader替换成url-loader

url-loader和file-loader的不同就是，url-loader将图片转换成base46，而file-loader就是将图片复制了

但是在开发中，我们往往是小的图片需要转换，但是大的图片直接使用图片即可
　　这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
　　而大的图片也进行转换，反而会影响页面的请求速度

怎么解决这个问题？
将小的图片转成base64，而大的图片不转换，复制到输出文件夹，让浏览器自己请求

{
            loader: 'url-loader',
            options: {
              esModule: false,
              //直接在这里指定文件夹和文件名，vue脚手架也是一样的
              name: 'img/[name].[hash:5].[ext]',
              // byte 小于100kb，才转换成base64
              limit: 100 * 1024
            },
          }