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中所用的參數請移步官網查詢解決，謝謝查閱！