資訊專欄INFORMATION COLUMN
摘要：一組鏈式的將按照先后順序進行編譯。在最后一個，返回所預期的。運行在中，并且能夠執(zhí)行任何可能的操作。用于對傳遞配置。分開的每個部分都相對于當前目錄解析。
webpack自稱能夠打包任何文件，這句話咋聽一下好像在吹牛逼，因為webpack本身只能理解JavaScript。但是由于webpack中有loader的存在，可以將所有類型的文件轉(zhuǎn)換為webpack能夠處理的有效模塊，然后利用webpack的打包能力對它們進行處理————前提是要有對應的loader存在Loader特性
loader 支持鏈式傳遞。能夠?qū)Y源使用流水線(pipeline)。一組鏈式的 loader 將按照先后順序進行編譯。loader 鏈中的第一個 loader 返回值給下一個 loader。在最后一個 loader，返回 webpack 所預期的 JavaScript。
loader 可以是同步的，也可以是異步的。
loader 運行在 Node.js 中，并且能夠執(zhí)行任何可能的操作。
loader 接收查詢參數(shù)。用于對 loader 傳遞配置。
loader 也能夠使用 options 對象進行配置。
除了使用 package.json 常見的 main 屬性，還可以將普通的 npm 模塊導出為 loader，做法是在 package.json 里定義一個 loader 字段。
插件(plugin)可以為 loader 帶來更多特性。
loader 能夠產(chǎn)生額外的任意文件。
當然，上面這些特性暫時看不明白也沒關(guān)系，學會如何使用才是重點。所以重點看如何使用Loader
使用Loader下面是常見的webpack配置的基本結(jié)構(gòu)：
const path = require("path")
module.exports = {
entry: "./src/index.js",
output:{
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module:{
...
}
}
其中entry用來設(shè)置webpack的入口文件，output是用來設(shè)置打包后的文件輸出位置以及相應的文件名。這里就不詳細介紹，下面我們來看一下常見的loader配置：
在文件中配置const path = require("path")
module.exports = {
entry: "./src/index.js",
output:{
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module:{
rules:[
{
test: /.css$/,
use: ["style-loader","css-loader"]
},
{
test: /.sass$/,
use: ["sass-loader","node-sass"]
},
{
test: /.(png|jp?eg|gif)$/,
use: ["file-loader"]
},
{
test: /.json$/,
use: ["json-loader"]
},
{
test: /.txt$/,
use: ["raw-loader"]
}
]
}
}
rules數(shù)組里面的每個對象都對應著一個匹配規(guī)則，從上到下分別匹配.css文件，.sass文件，圖片文件，.json文件以及.txt文本文件
另外，在運行之前千萬記得要安裝對應的依賴，示例：
npm install css-loader style-loader --save-dev直接導入
可以在 import 語句或任何等效于 import 的方式中指定 loader。使用 ! 將資源中的 loader 分開。分開的每個部分都相對于當前目錄解析。?后面可以傳遞參數(shù)，例如 ?key=value&foo=bar，或者一個 JSON 對象，例如 ?{"key":"value","foo":"bar"}
import Styles from "style-loader!css-loader?modules!./styles.css";通過CLI使用loader
示例：webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"
以上三種配置方式，第一種應該用的比較多，畢竟配置也比較方便...
總結(jié)在配置loader的時候盡量使用文件進行配置，并且可以在官方文檔找到相應的loader，具體的參數(shù)傳入可以在npm官網(wǎng)上找到，可以根據(jù)具體的需求來設(shè)置
掃描下方的二維碼或搜索「tony老師的前端補習班」關(guān)注我的微信公眾號，那么就可以第一時間收到我的最新文章。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90118.html
摘要：使用等預處理器編寫可以將你項目中的所有文件，處理成瀏覽器能識別的文件。測試打包基本的配置就完成了。修改處理文件執(zhí)行順序是從右到左修改一下入口文件中的樣式引入打包測試完美通過。這時可以使用提供的配置來使引入文件的時候變得更加方便簡單。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文鏈接 最近公司弄了個...
摘要：本次介紹的則是用來解決這類問題的。實現(xiàn)模塊實現(xiàn)思路將配置內(nèi)的命令的的內(nèi)聯(lián)從前至后組成一個數(shù)組。所有字符串內(nèi)部又可以截取，獲取完整的。分析并解析該數(shù)組內(nèi)的字符串，獲取各個的絕對路徑。 前言 在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來解決這類問題的...
摘要：在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發(fā)環(huán)境，用以鞏固我們之前學習的知識。 文章首發(fā)于我的github及個人博客，github請看https://github.com/huruji/blo...，轉(zhuǎn)載請注明出處。 在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達到的效果：1、...
摘要：構(gòu)建文件清理構(gòu)建目錄下的文件打包工具編譯文件模板函數(shù)編譯與配合使用入口處理項目中的不同類型的模塊。 前言 之前有寫了一篇webpack的文章(認識篇) 猛戳,大家對于webpack基本概念(entry,output,loader,plugin,mode...)應該是有了較模糊的認識.今天希望在通過(對于vue-cli的效仿)搭建一個自己的腳手架的途中對于概念會有更深刻的認識. 目錄 1...
摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實現(xiàn)文件分片斷點續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
閱讀 1588·2019-08-30 13:18
閱讀 1578·2019-08-29 12:19
閱讀 2094·2019-08-26 13:57
閱讀 4137·2019-08-26 13:22
閱讀 1179·2019-08-26 10:35
閱讀 2991·2019-08-23 18:09
閱讀 2500·2019-08-23 17:19
閱讀 677·2019-08-23 17:18
