webpack3之loader解析

webpack能幹什麼？官網給的答案就是，一句話，讓一切變得簡單！各式各樣的loader層出不窮，讓我們在建置時不知所措，於此，總結下loader的全解析。本文主要介紹webpack3之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 canle frontps. 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

1、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'
}

2、style-loader

Adds CSS to the DOM by injecting a c9ccee2e6ea535a969eb3f532ad9fe89tag

將模組的匯出作為樣式加入DOM 中

安裝：

npm install style-loader --save-dev

建議要與css-loader一起使用

使用：

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

##3、css-loader

解析CSS 檔案後，使用import 加載，並且返回CSS 程式碼

##安裝：

npm install css-loader --save-dev

使用：

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、less-loader

載入與轉譯LESS檔案

安裝：

npm install --save-dev less-loader less

使用：

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、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
 }
}

6、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'
}

7、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'
     })
   }
 }
}

相關推薦：

######基於Java類別的載入方式的classloader類別載入器詳解############如何理解webpack中loader和plugin############yii2如何利用webuploader實作圖片上傳的實例分析######

以上是webpack3之loader解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！