webpack学习之路（五）loader初识及常用loader介绍

最新推荐文章于 2024-07-25 23:12:59 发布

weixin_34375233

最新推荐文章于 2024-07-25 23:12:59 发布

阅读量305

点赞数

文章标签： webpack javascript 前端 ViewUI

原文链接：https://juejin.im/post/5d00dcf4f265da1b8811d5a3

版权

我们知道webpack本身只能解析js文件，但是我们的项目中肯定会有html,css,图片等其他文件类型，这个时候我们就需要loader帮我们把这些文件转化成webpack能够处理的有效模块。

什么是loader?

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。K 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader本身就是一个函数，接收源代码为入参，输出编译过之后代码。

使用loader

最常使用的是在webpack.config.js里指定loader webpack.config.js

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

test设置文件匹配规则

use指定使用loader

options为使用loader的配置项

注意：loader的执行顺序是从右向左依次执行

常用的loader

ok，我们来看下常用的一些loader使用

解析es6

使用babel-loader，它依赖babel，所以需要配置文件.babelrc

而对ES6的解析，我们只需要在.babelrc加上如下配置即可：

{
  "presets": [
    "@babel/preset-env"
  ]
}
复制代码

接着配置下webpack.config.js

  module: {
    rule: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: '/node_modules/'
      }
    ]
  }
复制代码

解析JSX

也是使用babel-loader
首先要在.babelrc增加react的解析配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
复制代码

webpack.config.js同上

解析css

使用css-loader和style-loader
css-loader用于加载.css文件，并且转换成commonJs对象
style-loader将样式通过<style>标签插入到head中
我们先安装一下

配置webpack.config.js

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

解析less和sass

less使用less-loader
sass使用sass-loader

这两个loader都是先将文件转换成css，然后通过css-loader和style-loader输出到页面

webpack.config.js

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

解析图片

1.file-loader webpack.config.js

  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
复制代码

2.url-loader url-loader功能和file-loader差不多，多了一个小资源转base64的功能

webpack.config.js

  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 10240
            }
        }]
      }
    ]
  }
复制代码

limit就是对转换尺寸的限制。