成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x014：CustomLoader自定義loader

taohonghui / 2605人閱讀

摘要：接下來將的本質(zhì)和自定義。環(huán)境配置這一次需要兩個(gè)項(xiàng)目，一個(gè)項(xiàng)目是，實(shí)現(xiàn)了，一個(gè)是，使用了。當(dāng)然沒有必要去真的重復(fù)制造輪子，只是為了掌握這種造輪子的技術(shù)，對理解整個(gè)工程，對理解功能提供更多思路而已。

0x001 概述

上一章我們講了eslint-loader的配置，常用類型的常用loader已經(jīng)都講完了，大體上其他的都大同小異，需要去各大loader的官方查閱用戶手冊就可以了。接下來將loader的本質(zhì)和自定義loader。

0x002 環(huán)境配置

這一次需要兩個(gè)項(xiàng)目，一個(gè)項(xiàng)目是custome-loader，實(shí)現(xiàn)了custome-loader，一個(gè)是user，使用了custom-loader。

$ mkdir 0x0014-custome-loader
$ cd 0x0014-custome-loader
0x003 custome-loader實(shí)現(xiàn)

custome-loader項(xiàng)目配置

$ mkdir custome-loader
$ cd custome-loader
$ npm init -y

實(shí)現(xiàn)custome-loader

$ vim ./index.js
/**
 * 實(shí)現(xiàn)一個(gè)函數(shù)
 * 作用是將`var`替換成`let`
 * @param content 字符串
 * @returns string 字符串 */
    module.exports = function (content) {
        console.log(content)
        content = content.replace(/var/g, "let")
        console.log(content)
        return content;
         };

測試

$ vim ./test/index.js
// ./test/index.js
var custom = require("./../index")
custom("var name="張三"")

$ node  ./test/index.js
元數(shù)據(jù) var name="張三"
處理之后 let name="張三"

0x004 custome-loader使用

配置

$ mkdir user
$ cd user
$ npm init -y
$ vim webpack.config.js
// ./webpack.config.js
const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
;

本地安裝依賴

$ npm install --sve-dev /MY_PROJECT/PROJECT_OWN/webpack_study/0x014-custom-loader/custom-loader
# 輸出
pm WARN [email protected] No description
npm WARN [email protected] No repository field.
[email protected]
updated 1 package in 0.3s

修改配置

const path     = require("path");
module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test  : /.js$/,
                loader: "custom-loader",
            }
        ]
    }
}
;

打包

$ webpack
# 輸出
元數(shù)據(jù) var name="張三"
var age=14

處理之后 let name="張三"
let age=14

Hash: 4040662a699dbc91f8dd
Version: webpack 3.8.1
Time: 68ms
          Asset     Size  Chunks             Chunk Names
index.bundle.js  2.62 kB       0  [emitted]  index
   [0] multi ./src/index.js 28 bytes {0} [built]
   [2] ./src/index.js 25 bytes {0} [built]

查看打包結(jié)果

/* 1 */
/***/ (function(module, exports) {

let name="張三"
let age=14


/***/ })
/******/ ]);

可以看到，webpack在打包的時(shí)候，將./src/index.js的內(nèi)容作為我們定義在custome-loader中的方法的參數(shù)，同時(shí)執(zhí)行該方法，將處理后的返回值作為結(jié)果輸出到./dist/index.bunle.js.

0x005 更多配置

這里只是實(shí)現(xiàn)了一個(gè)最簡單的loader，而webpack官方還提供了許多其他的API來實(shí)現(xiàn)功能更加強(qiáng)大的loader，憑借這些API我們也可以寫出自己的file-loader、json-loader之類的。當(dāng)然沒有必要去真的重復(fù)制造輪子，只是為了掌握這種造輪子的技術(shù)，對理解整個(gè)webpack工程，對理解web功能提供更多思路而已。

0x006 資源

源代碼

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89639.html

相關(guān)文章

  • 從零開始的webpack生活-0x001：webpack初次相逢

    摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯(cuò)誤，比如語法錯(cuò)誤，將會在控制臺以紅色文字顯示，并且在你修復(fù)之后會再次打包。 0x001 概述 其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評論0 收藏0

  • 從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

    摘要：概述上一章講的是，這一章講的是依舊是沒有任何關(guān)系。配合插件自動(dòng)插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請查閱關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關(guān)系。 0x002 插件介紹 這個(gè)插件用來將css導(dǎo)出到單獨(dú)文件 0x003 栗子-不...

    Jonathan Shieber 評論0 收藏0

  • 從零開始的webpack生活-0x011：StylingLoader裝載樣式

    0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

    mylxsw 評論0 收藏0

  • 從零開始的webpack生活-0x010：TemplatingLoader裝載模板

    摘要：概述上一章講的時(shí)候關(guān)于文件相關(guān)的，這一章講的是模板相關(guān)的。環(huán)境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結(jié)果可以看到，被打包成了字符串，并封裝成模塊導(dǎo)出。更多資源，請查閱的倉庫和官網(wǎng)資源源代碼 0x001 概述 上一章講的時(shí)候關(guān)于文件相關(guān)的loder，這一章講的是模板相關(guān)的loder。 0x002 環(huán)境配置 $ mkdir 0x010-templating-loader...

    jk_v1 評論0 收藏0

  • 從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

    摘要：概述上一章講的是樣式裝載相關(guān)的，這一章見得是腳本加載相關(guān)的環(huán)境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結(jié)果可以看到，語法被自動(dòng)轉(zhuǎn)化成了更多配置請查閱關(guān)于章節(jié)栗子加載安裝依賴 0x001 概述 上一章講的是樣式裝載相關(guān)的loader，這一章見得是腳本加載相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x012-transliling-loader $ c...

    Tonny 評論0 收藏0

發(fā)表評論

0條評論

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