成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

jk_v1 / 2176人閱讀

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

0x001 概述

上一章講的時候關(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)出。
注意：看配置文件，除了配置一個html-loader，還配置了一個url-loader，因為當(dāng)時，會解析為require("./../res/icon.jpg"),因此，需要一個loader來解析這個資源，所以配置了一個url-loader

其他配置

removeComments：移除評論

collapseWhitespace：刪除空格

removeAttributeQuotes：刪除屬性的"號

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)容被打包成了一個返回html字符串的函數(shù)，并且該函數(shù)被封裝成模塊。

更多資源，請查閱pug-loader的倉庫和pug官網(wǎng)

0x006 資源

源代碼

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

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

相關(guān)文章

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

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

    Turbo 評論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生活-0x012：TranspilingLoader裝載腳本

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

    Tonny 評論0 收藏0

  • 從零開始的webpack生活-0x009：FilesLoader裝載文件

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

    NervosNetwork 評論0 收藏0

  • 從零開始的webpack生活-0x013：LintingLoader格式校驗

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

    ephererid 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<