webpack Loading理解

·  阅读 50

一、loader 的作用

  • loader 主要作用是用于对模块的"源代码"进行转换,就是在 import 或 require 加载模块时对他进行编译、压缩等处理,最终一起打包到指定的文件

  • webpack 本质上做的事情就是分析出各种模块之间的依赖关系,然后形成资源列表,最终打包生成到指定的文件中

image.png

在 webpack 内部中,任何文件都是模块,不仅仅只是 js 文件,默认情况下,在遇到 import 或者 require 加载模块的时候,webpack 只支持对 js 和 json 文件打包,像 css、sass、png 等这些类型的文件的时候,webpack 则无能为力,这时候就需要配置对应的 loader 进行文件内容的解析

image.png 当 webpack 碰到不识别的模块的时候,webpack 会在配置的中查找该文件对应的loader 去进行解析

二、loader 的配置方式

最常用的就是在配置文件 webpack.config.js 指定 loader,通常写在module对象的 rules 属性中

  • rules是一个数组,可以让我们配置很多个 loader

  • 每一个 loader 对应一个对象的形式,对象属性 test 为匹配的规则,一般情况为正则表达式,属性use针对匹配到文件类型,调用对应的 loader 进行处理

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};
复制代码

三、loader 的特性

  • loader 是可以链式调用的,链中的每个 loader 会处理之前已处理过的资源,最终变成 js 代码,比如在解析sass文件的时候,就会先执行 sass-loader、css-loader、style-loader

四、常见的 loader

4-1 css-loader

作用:

  1. 负责将 .css 文件进行一个解析
  2. 分析 css 模块之间的关系,并合成⼀个 css
  3. 允许将 css 文件通过 require 的方式引入
rules: [
  ...,
 {
  test: /.css$/,
    use: {
      loader: "css-loader",
      options: {
         url: true, // 启用/禁用 url() 处理
         import: true, // 启用/禁用 @import 处理
         sourceMap: false  // 启用/禁用 Sourcemap
      }
    }
 }
]
复制代码

拓展:如果只通过 css-loader 加载css文件,这时候页面代码设置的样式并没有生效,原因在于,css-loader 只是负责将 .css 文件进行一个解析,而并不会将解析后的 css 插入到页面中,如果要将解析后的 css 样式插入 html 文件 style 中,那么就需要 style-loader

4-2 style-loader

作用:把 css-loader 解析后的内容,用 style 标签挂载到页面的 head 中

rules: [
  ...,
 {
  test: /.css$/,
    use: ["style-loader", "css-loader"] // 处理顺序为:从右到左,从下往上
 }
]
复制代码

4-3 less-loader

作用:将 less 预处理器编写的 css 样式解析成 css 文件

rules: [
  ...,
 {
  test: /.css$/,
    use: ["style-loader", "css-loader","less-loader"]
 }
]
复制代码

4-4 raw-loader

作用:可以将文件作为字符串导入,主要用来解析txt、md格式的文件

module.exports = {
  ...,
  module: {
      rules: [
      {
        test: /.(txt|md)$/,
        use: 'raw-loader'
     }
    ]
 }
}
复制代码

4-5 file-loader

作用:主要将识别出的资源模块,移动到指定的输出⽬目录

rules: [
  ...,
 {
  test: /.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images",
        // 打包后文件的 url
        publicPath: './images',
      }
    }
 }
]
复制代码

4-6 url-loader

作用:

  1. url-loader 和 file-loader 类似,可以完成 file-loader 所有事情
  2. url-loader 可以设置一个limit值,当文件小于limit值的时候,就会把图片转成 base64 格式的字符串,并打包到 js中
rules: [
  ...,
 {
  test: /.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100
      }
    }
 }
]
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改