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

時間 2019-11-16

標籤開始 webpack 生活 0x010 templatingloader 裝載模板欄目悠閒生活简体版

原文原文鏈接

0x001 概述

上一章講的時候關於文件相關的loder，這一章講的是模板相關的loder。html

0x002 環境配置

$ mkdir 0x010-templating-loader
$ cd 0x010-templating-loader
$ npm init -y
$ npm install --save-dev webpack

0x003 栗子1-`html-loader`-加載html

安裝依賴包webpack
```
$ cnpm install --save-dev html-loader
```

編寫index.html並引入git

// ./src/content.html
<p>hello webpack</p>
<img src="./../res/icon.jpg"/>

// ./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>templating-loader</title>
</head>
<body>

</body>
<script src="./../dist/index.bundle.js"></script>

</html>
// ./src/index.js
require('./index.html')

配置webpack.config.jsgithub

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`
                        }
                    }
                ]
            }
        ]
    }
};

打包並查看結果web
```
// ./dist/index.bundle.js
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

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


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

module.exports = "<p>hello webpack</p>\n<img src=\"./../res/icon.jpg\"/>";

/***/ })
/******/ ]);
```
能夠看到，html被打包成了字符串，並封裝成模塊導出。
注意：看配置文件，除了配置一個html-loader，還配置了一個url-loader，由於當<img src="./../res/icon.jpg"/>時，會解析爲require('./../res/icon.jpg'),所以，須要一個loader來解析這個資源，因此配置了一個url-loadernpm
其餘配置segmentfault
- removeComments：移除評論api
- collapseWhitespace：刪除空格函數
- removeAttributeQuotes：刪除屬性的"號ui
- keepClosingSlash：保持標籤閉合
- minifyJS：壓縮JS
- minifyCSS:壓縮CSS

0x004 栗子2-配合`extra-loader`將`html`導出成文件

修改文件

{
            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

打包並查看結果

// ./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關於html-loader部分

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

安裝依賴

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

添加配置

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

調用

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

打包並查看結果

/* 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張三\u003C\u002Fp\u003E";;return pug_html;};
module.exports = template;

/***/ }),
...

能夠看到pug內容被打包成了一個返回html字符串的函數，而且該函數被封裝成模塊。