阅读 965

webpack学习之路(五)loader初识及常用loader介绍

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

什么是loader?

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。K 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URLloader 甚至允许你直接在 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-loaderstyle-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就是对转换尺寸的限制。

链接文章

webpack学习之路(四)webpack-hot-middleware实现热更新

webpack学习之路(三)webpack-dev-middleware

webpack学习之路(二)webpack-dev-server实现热更新

webpack学习之路(一)基础配置

I am moving forward.

文章分类
前端
文章标签