webpack3–loader全解析

皓月星空發表於2019-03-04
Web

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

相關文章