阅读 3211

webpack3--loader全解析

首先亮出webpack官方网站,webpack能干什么?官网给出的答案就是,一句话,让一切变得简单!

各式各样的loader层出不穷,让我们在构建时不知所措,于此,总结下loader的全解析。

概念

loader,顾名思义,加载器,英文的解释如下:
Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
中文翻译过来就是:
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或“加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
从中,可以看出loader的强大作用,分析下:

  1. 转换的作用。开发所用到的都转换成网页加载所必备的html+css+js+img等要求格式的文件。
  2. 转换对象是源代码。loader只对源代码转换,至于其他的功能,plugins就来接收它做不到的地方。

总结一句话:loader, 加载的机器,形象的比喻下,就像一个豆浆机,放上你的原料,它就开始认真的工作了!

loader的三种使用方式

在你的应用程序中,有三种使用 loader 的方式:

  • 配置(推荐):在 webpack.config.js 文件中指定 loader。
    module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式,并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
          ]
        }
      ]
    }复制代码
  • 内联:在每个 import 语句中显式指定 loader。
    可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。
    import Styles from 'style-loader!css-loader?modules!./styles.css';复制代码
    通过前置所有规则及使用 !,可以对应覆盖到配置中的任意 loader。
  • CLI:在 shell 命令中指定它们。
    你也可以通过 CLI 使用 loader:
    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'复制代码
    这会对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。

Loader 特性

  • 支持链式传递
  • 可以是同步的,也可以是异步的
  • 运行在 Node.js 中,并且能够执行任何可能的操作
  • 接收查询参数。用于对 loader 传递配置
  • 也能够使用 options 对象进行配置
  • 除了使用 package.json 常见的 main 属性,还可以将普通的 npm 模块导出为 loader,做法是在 package.json 里定义一个 loader 字段
  • 插件(plugin)可以为 loader 带来更多特性
  • loader 能够产生额外的任意文件
    loader 通过(loader)预处理函数,为 JavaScript 生态系统提供了更多能力。用户现在可以更加灵活地引入细粒度逻辑,例如压缩、打包、语言翻译等等

解析 Loader

loader 遵循标准的模块解析。多数情况下,loader 将从模块路径(通常将模块路径认为是 npm install, node_modules)解析。

loader 模块需要导出为一个函数,并且使用 Node.js 兼容的js编写。通常使用 npm 进行管理,但是也可以将自定义 loader 作为应用程序中的文件。按照约定,loader 通常被命名为 xxx-loader(例如 json-loader)。

常用的loader

webpack 可以使用 loader 来预处理文件。这允许你打包除js 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

  • babel-loader
    This package allows transpiling JavaScript files using Babel and webpack.
    加载 ES2015+ 代码,然后使用 Babel 转译为 ES5
    安装:
    npm install --save-dev babel-loader babel-core babel-preset-env webpack
    使用:
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }复制代码
  • style-loader
    Adds CSS to the DOM by injecting a <style> tag
    将模块的导出作为样式添加到 DOM 中
    安装:
    npm install style-loader --save-dev
    建议要与css-loader一起使用
    使用:
    {
      test: /\.css$/,
      use:  [
      'style-loader',
      'css-loader'
    ]
    }复制代码
  • css-loader
    解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码
    安装:
    npm install css-loader --save-dev
    使用:
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }复制代码
  • less-loader
    加载和转译 LESS 文件
    安装:
    npm install --save-dev less-loader less
    使用:
    {
      test: /\.less$/,
      exclude: /node_modules/,
      use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
    }复制代码
  • url-loader
    Loads files as base64 encoded URL
    处理图片类文件,但如果文件小于限制,可以返回 data URL
    安装:
    npm install --save-dev url-loader
    使用:
    {
      test: /\.(jpg|jpeg|png|gif)$/,
      loader: 'url-loader',
      options: {
          limit: 8192
      }
    }复制代码
  • file-loader
    Instructs webpack to emit the required object as file and to return its public URL
    处理font/svg等,将文件发送到输出文件夹,并返回(相对)URL
    安装:
    npm install file-loader --save-dev
    使用:
    {
      test: /\.(woff|woff2|svg|eot|ttf)$/,
      use: 'file-loader'
    }复制代码
  • vue-loader
    加载和转译 Vue 组件
    安装:
    npm install --save-dev vue-loader vue vue-template-compiler
    使用:
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
          loaders: {
              less: ExtractTextPlugin.extract({
                  use: ['css-loader', 'less-loader'],
                  fallback: 'vue-style-loader'
              })
          }
      }
    }复制代码
  • postcss-loader
    使用 PostCSS 加载和转译 CSS/SSS 文件
    安装:
    npm i -D postcss-loader
    使用:
    在webpack.config.js配置
    {
    test: /\.sss$/,
    use: [
      ...,
      { loader: 'postcss-loader', options: { parser: 'sugarss' } }
    ]
    }复制代码
    至此,有关loader中所用的参数请移步官网查询解决,谢谢查阅!
文章分类
前端
文章标签