亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack簡(jiǎn)易教程之loader

MobService / 2044人閱讀

摘要：一組鏈?zhǔn)降膶凑障群箜樞蜻M(jìn)行編譯。在最后一個(gè)，返回所預(yù)期的。運(yùn)行在中，并且能夠執(zhí)行任何可能的操作。用于對(duì)傳遞配置。分開(kāi)的每個(gè)部分都相對(duì)于當(dāng)前目錄解析。

webpack自稱能夠打包任何文件，這句話咋聽(tīng)一下好像在吹牛逼，因?yàn)?b>webpack本身只能理解JavaScript。但是由于webpack中有loader的存在，可以將所有類型的文件轉(zhuǎn)換為webpack能夠處理的有效模塊，然后利用webpack的打包能力對(duì)它們進(jìn)行處理————前提是要有對(duì)應(yīng)的loader存在
Loader特性

loader 支持鏈?zhǔn)絺鬟f。能夠?qū)Y源使用流水線(pipeline)。一組鏈?zhǔn)降?loader 將按照先后順序進(jìn)行編譯。loader 鏈中的第一個(gè) loader 返回值給下一個(gè) loader。在最后一個(gè) loader，返回 webpack 所預(yù)期的 JavaScript。

loader 可以是同步的，也可以是異步的。

loader 運(yùn)行在 Node.js 中，并且能夠執(zhí)行任何可能的操作。

loader 接收查詢參數(shù)。用于對(duì) loader 傳遞配置。

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)生額外的任意文件。

當(dāng)然，上面這些特性暫時(shí)看不明白也沒(méi)關(guān)系，學(xué)會(huì)如何使用才是重點(diǎn)。所以重點(diǎn)看如何使用Loader

使用Loader

下面是常見(jiàn)的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用來(lái)設(shè)置webpack的入口文件，output是用來(lái)設(shè)置打包后的文件輸出位置以及相應(yīng)的文件名。這里就不詳細(xì)介紹，下面我們來(lái)看一下常見(jiàn)的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ù)組里面的每個(gè)對(duì)象都對(duì)應(yīng)著一個(gè)匹配規(guī)則，從上到下分別匹配.css文件，.sass文件，圖片文件，.json文件以及.txt文本文件
另外，在運(yùn)行之前千萬(wàn)記得要安裝對(duì)應(yīng)的依賴，示例：

npm install css-loader style-loader --save-dev
直接導(dǎo)入

可以在 import 語(yǔ)句或任何等效于 import 的方式中指定 loader。使用 ! 將資源中的 loader 分開(kāi)。分開(kāi)的每個(gè)部分都相對(duì)于當(dāng)前目錄解析。?后面可以傳遞參數(shù)，例如 ?key=value&foo=bar，或者一個(gè) JSON 對(duì)象，例如 ?{"key":"value","foo":"bar"}

import Styles from "style-loader!css-loader?modules!./styles.css";
通過(guò)CLI使用loader

示例：webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"

以上三種配置方式，第一種應(yīng)該用的比較多，畢竟配置也比較方便...

總結(jié)

在配置loader的時(shí)候盡量使用文件進(jìn)行配置，并且可以在官方文檔找到相應(yīng)的loader，具體的參數(shù)傳入可以在npm官網(wǎng)上找到，可以根據(jù)具體的需求來(lái)設(shè)置

掃描下方的二維碼或搜索「tony老師的前端補(bǔ)習(xí)班」關(guān)注我的微信公眾號(hào)，那么就可以第一時(shí)間收到我的最新文章。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90118.html

相關(guān)文章

  • webpack 簡(jiǎn)易配置入門教程

    摘要：使用等預(yù)處理器編寫可以將你項(xiàng)目中的所有文件，處理成瀏覽器能識(shí)別的文件。測(cè)試打包基本的配置就完成了。修改處理文件執(zhí)行順序是從右到左修改一下入口文件中的樣式引入打包測(cè)試完美通過(guò)。這時(shí)可以使用提供的配置來(lái)使引入文件的時(shí)候變得更加方便簡(jiǎn)單。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文鏈接 最近公司弄了個(gè)...

    JackJiang 評(píng)論0 收藏0

  • webpack源碼分析之三：loader

    摘要：本次介紹的則是用來(lái)解決這類問(wèn)題的。實(shí)現(xiàn)模塊實(shí)現(xiàn)思路將配置內(nèi)的命令的的內(nèi)聯(lián)從前至后組成一個(gè)數(shù)組。所有字符串內(nèi)部又可以截取，獲取完整的。分析并解析該數(shù)組內(nèi)的字符串，獲取各個(gè)的絕對(duì)路徑。 前言 在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應(yīng)用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來(lái)解決這類問(wèn)題的...

    laznrbfe 評(píng)論0 收藏0

  • Webpack系列——手把手教你使用Webpack搭建簡(jiǎn)易的React開(kāi)發(fā)環(huán)境

    摘要：在這篇文章中我們開(kāi)始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的開(kāi)發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的知識(shí)。 文章首發(fā)于我的github及個(gè)人博客，github請(qǐng)看https://github.com/huruji/blo...，轉(zhuǎn)載請(qǐng)注明出處。 在這篇文章中我們開(kāi)始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的React開(kāi)發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的Webpack知識(shí)。首先我們需要明確這次開(kāi)發(fā)環(huán)境需要達(dá)到的效果：1、...

    cucumber 評(píng)論0 收藏0

  • 隨我來(lái)基于webpack構(gòu)建一個(gè)簡(jiǎn)易的vue腳手架 (webpack系列二)

    摘要：構(gòu)建文件清理構(gòu)建目錄下的文件打包工具編譯文件模板函數(shù)編譯與配合使用入口處理項(xiàng)目中的不同類型的模塊。 前言 之前有寫了一篇webpack的文章(認(rèn)識(shí)篇) 猛戳,大家對(duì)于webpack基本概念(entry,output,loader,plugin,mode...)應(yīng)該是有了較模糊的認(rèn)識(shí).今天希望在通過(guò)(對(duì)于vue-cli的效仿)搭建一個(gè)自己的腳手架的途中對(duì)于概念會(huì)有更深刻的認(rèn)識(shí). 目錄 1...

    tomorrowwu 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開(kāi)發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開(kāi)發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

MobService

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<