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

咱们知道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就是对转换尺寸的限制。

连接文章

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（三）webpack-dev-middleware

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置

I am moving forward.