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中所用的参数请移步官网查询解决，谢谢查阅！