国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開(kāi)始的webpack生活-0x010：TemplatingLoader裝載模板

jk_v1 / 2113人閱讀

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

0x001 概述

上一章講的時(shí)候關(guān)于文件相關(guān)的loder，這一章講的是模板相關(guān)的loder。

0x002 環(huán)境配置 
$ mkdir 0x010-templating-loader
$ cd 0x010-templating-loader
$ npm init -y
$ npm install --save-dev webpack
0x003 栗子1-html-loader-加載html

安裝依賴包

$ cnpm install --save-dev html-loader

編寫index.html并引入

// ./src/content.html

hello webpack



// ./src/index.html



    
    templating-loader







// ./src/index.js
require("./index.html")

配置webpack.config.js

const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /.html/,
                use : {
                    loader:"html-loader",
                    options: {
                        attrs: [":data-src"],
                        minimize          : true,
                        removeComments    : false,
                        collapseWhitespace: false
                    }
                }
            },
            {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader : "url-loader",
                        options: {
                            limit   : 1048576, // 低于1m
                            name    : "[name].[hash].[ext]",
                            fallback: "file-loader" //否則使用`file-loader`
                        }
                    }
                ]
            }
        ]
    }
};

打包并查看結(jié)果

// ./dist/index.bundle.js
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var content = __webpack_require__(2)
document.write(content)


/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = "
hello webpack

";

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

可以看到，html被打包成了字符串，并封裝成模塊導(dǎo)出。
注意：看配置文件，除了配置一個(gè)html-loader，還配置了一個(gè)url-loader，因?yàn)楫?dāng)時(shí)，會(huì)解析為require("./../res/icon.jpg"),因此，需要一個(gè)loader來(lái)解析這個(gè)資源，所以配置了一個(gè)url-loader

其他配置

removeComments：移除評(píng)論

collapseWhitespace：刪除空格

removeAttributeQuotes：刪除屬性的"號(hào)

keepClosingSlash：保持標(biāo)簽閉合

minifyJS：壓縮JS

minifyCSS:壓縮CSS

0x004 栗子2-配合extra-loader將html導(dǎo)出成文件

修改文件

        {
            test: /.html/,
            use : [
                {
                    loader : "file-loader",
                    options: {
                        name: "[name]-dist.[ext]",
                    },
                },
                {
                    loader: "extract-loader",
                },
                {
                    loader : "html-loader",
                    options: {
                        attrs             : [":data-src"],
                        minimize          : true,
                        removeComments    : false,
                        collapseWhitespace: false
                    }
                }
            ]
        },

安裝依賴

$ cnpm install --save-dev extact-loader file-loader

打包并查看結(jié)果

// ./dist
content.dist.html
index.bundle.js

// ./dist/index.bundle.js    
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var content = __webpack_require__(2)
document.write(content)


/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "content-dist.html";

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

其他更多配置，查看webpack關(guān)于html-loader部分

0x005 栗子3-pug-loader：pug模板解析

安裝依賴

        {
            test: /.pug$/,
            use : "pug-loader"
        },

添加配置

{
     test: /.pug$/,
     use : "pug-loader"
},

調(diào)用

var content = require("./content.pug")
document.write(content())

打包并查看結(jié)果

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


var content = __webpack_require__(2)
document.write(content())

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

var pug = __webpack_require__(3);

function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "u003Cp id="name"u003E張三u003Cu002Fpu003E";;return pug_html;};
module.exports = template;

/***/ }),
...

可以看到pug內(nèi)容被打包成了一個(gè)返回html字符串的函數(shù)，并且該函數(shù)被封裝成模塊。

更多資源，請(qǐng)查閱pug-loader的倉(cāng)庫(kù)和pug官網(wǎng)

0x006 資源

源代碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/89622.html

相關(guān)文章

  • 從零開(kāi)始的webpack生活-0x001：webpack初次相逢

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

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

  • 從零開(kāi)始的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 評(píng)論0 收藏0

  • 從零開(kāi)始的webpack生活-0x012：TranspilingLoader裝載腳本

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

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

  • 從零開(kāi)始的webpack生活-0x009：FilesLoader裝載文件

    摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個(gè)來(lái)處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開(kāi)始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因?yàn)榧磳⒁v的ExtractTextWebp...

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

  • 從零開(kāi)始的webpack生活-0x013：LintingLoader格式校驗(yàn)

    摘要：概述上一章講的是腳本裝載相關(guān)的，這一章見(jiàn)得是腳本格式校驗(yàn)相關(guān)的環(huán)境配置使用校驗(yàn)格式這份配置是偷的安裝依賴包修改配置文件添加配置文件編寫測(cè)試代碼張三打包輸出張三 0x001 概述 上一章講的是腳本裝載相關(guān)的loader，這一章見(jiàn)得是腳本格式校驗(yàn)相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...

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

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

0條評(píng)論

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