从零开始的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字符串的函数，而且该函数被封装成模块。

更多资源，请查阅pug-loader的仓库和pug官网

0x006 资源

源代码