首先亮出webpack官方網(wǎng)站，webpack能干什么抹腿？官網(wǎng)給出的答案就是岛请，一句話，讓一切變得簡(jiǎn)單警绩！

各式各樣的loader層出不窮崇败，讓我們?cè)跇?gòu)建時(shí)不知所措，于此肩祥，總結(jié)下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 “l(fā)oad” 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!
中文翻譯過(guò)來(lái)就是：
loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或“加載”模塊時(shí)預(yù)處理文件将饺。因此贡避，loader 類(lèi)似于其他構(gòu)建工具中“任務(wù)(task)”痛黎，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語(yǔ)言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件蹬碧！
從中，可以看出loader的強(qiáng)大作用琉历，分析下：

1. 轉(zhuǎn)換的作用。開(kāi)發(fā)所用到的都轉(zhuǎn)換成網(wǎng)頁(yè)加載所必備的html+css+js+img等要求格式的文件水醋。
2. 轉(zhuǎn)換對(duì)象是源代碼旗笔。loader只對(duì)源代碼轉(zhuǎn)換，至于其他的功能拄踪，plugins就來(lái)接收它做不到的地方蝇恶。

總結(jié)一句話：loader, 加載的機(jī)器，形象的比喻下惶桐，就像一個(gè)豆?jié){機(jī)撮弧，放上你的原料，它就開(kāi)始認(rèn)真的工作了姚糊！

loader的三種使用方式

在你的應(yīng)用程序中贿衍，有三種使用 loader 的方式：

• 配置（推薦）：在 webpack.config.js 文件中指定 loader。
  module.rules 允許你在 webpack 配置中指定多個(gè) loader救恨。 這是展示 loader 的一種簡(jiǎn)明方式贸辈，并且有助于使代碼變得簡(jiǎn)潔。同時(shí)讓你對(duì)各個(gè) loader 有個(gè)全局概覽

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

• 內(nèi)聯(lián)：在每個(gè) import 語(yǔ)句中顯式指定 loader肠槽。
  可以在 import 語(yǔ)句或任何等效于 "import" 的方式中指定 loader擎淤。使用 ! 將資源中的 loader 分開(kāi)。分開(kāi)的每個(gè)部分都相對(duì)于當(dāng)前目錄解析秸仙。

import Styles from 'style-loader!css-loader?modules!./styles.css';

通過(guò)前置所有規(guī)則及使用 !嘴拢，可以對(duì)應(yīng)覆蓋到配置中的任意 loader。

• CLI：在 shell 命令中指定它們寂纪。
  你也可以通過(guò) CLI 使用 loader：

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

這會(huì)對(duì) .jade 文件使用 jade-loader席吴，對(duì) .css 文件使用 style-loader 和 css-loader。

Loader 特性

• 支持鏈?zhǔn)絺鬟f
• 可以是同步的弊攘，也可以是異步的
• 運(yùn)行在 Node.js 中抢腐，并且能夠執(zhí)行任何可能的操作
• 接收查詢(xún)參數(shù)姑曙。用于對(duì) loader 傳遞配置
• 也能夠使用 options 對(duì)象進(jìn)行配置
• 除了使用 package.json 常見(jiàn)的 main 屬性襟交，還可以將普通的 npm 模塊導(dǎo)出為 loader，做法是在 package.json 里定義一個(gè) loader 字段
• 插件(plugin)可以為 loader 帶來(lái)更多特性
• loader 能夠產(chǎn)生額外的任意文件
  loader 通過(guò)（loader）預(yù)處理函數(shù)伤靠，為 JavaScript 生態(tài)系統(tǒng)提供了更多能力捣域。用戶現(xiàn)在可以更加靈活地引入細(xì)粒度邏輯啼染，例如壓縮、打包焕梅、語(yǔ)言翻譯等等

解析 Loader

loader 遵循標(biāo)準(zhǔn)的模塊解析迹鹅。多數(shù)情況下，loader 將從模塊路徑（通常將模塊路徑認(rèn)為是 npm install, node_modules）解析贞言。

loader 模塊需要導(dǎo)出為一個(gè)函數(shù)斜棚，并且使用 Node.js 兼容的js編寫(xiě)。通常使用 npm 進(jìn)行管理该窗，但是也可以將自定義 loader 作為應(yīng)用程序中的文件弟蚀。按照約定，loader 通常被命名為 xxx-loader（例如 json-loader）酗失。

常用的loader

webpack 可以使用 loader 來(lái)預(yù)處理文件义钉。這允許你打包除js 之外的任何靜態(tài)資源。你可以使用 Node.js 來(lái)很簡(jiǎn)單地編寫(xiě)自己的 loader规肴。

• babel-loader
  This package allows transpiling JavaScript files using Babel and webpack.
  加載 ES2015+ 代碼捶闸，然后使用 Babel 轉(zhuǎn)譯為 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
  將模塊的導(dǎo)出作為樣式添加到 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
  加載和轉(zhuǎn)譯 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
  處理圖片類(lèi)文件删壮，但如果文件小于限制，可以返回 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等序调，將文件發(fā)送到輸出文件夾醉锅，并返回（相對(duì)）URL
  安裝：
  npm install file-loader --save-dev
  使用：

{
    test: /\.(woff|woff2|svg|eot|ttf)$/,
    use: 'file-loader'
}

• vue-loader
  加載和轉(zhuǎn)譯 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 加載和轉(zhuǎn)譯 CSS/SSS 文件
  安裝：
  npm i -D postcss-loader
  使用：
  在webpack.config.js配置

{
  test: /\.sss$/,
  use: [
    ...,
    { loader: 'postcss-loader', options: { parser: 'sugarss' } }
  ]
}

至此，有關(guān)loader中所用的參數(shù)請(qǐng)移步官網(wǎng)查詢(xún)解決发绢，謝謝查閱硬耍！