首先亮出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

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 <style> tag

將模塊的導出作為樣式添加到 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'
     })
   }
 }
}

至此，有關loader中所用的參數請移步官網查詢解決，謝謝查閱！以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

網頁名稱：webpack3之loader全解析
當前地址：http://vcdvsql.cn/article34/gjohpe.html

成都網站建設公司_創新互聯，為您提供面包屑導航、營銷型網站建設、網站建設、、外貿建站、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯