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

各式各樣的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!

中文翻譯過來就是：

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或“加載”模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

從中，可以看出loader的強(qiáng)大作用，分析下：

1. 轉(zhuǎn)換的作用。開發(fā)所用到的都轉(zhuǎn)換成網(wǎng)頁加載所必備的html+css+js+img等要求格式的文件。

2. 轉(zhuǎn)換對(duì)象是源代碼。loader只對(duì)源代碼轉(zhuǎn)換，至于其他的功能，plugins就來接收它做不到的地方。

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

常用的loader

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

2、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'
]
}

3、css-loader

解析 CSS 文件后，使用 import 加載，并且返回 CSS 代碼

安裝：

npm install css-loader --save-dev

使用：

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

4、less-loader

加載和轉(zhuǎn)譯 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等，將文件發(fā)送到輸出文件夾，并返回（相對(duì)）URL

安裝：

npm install file-loader --save-dev

使用：

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com