从零开始的webpack生活-0x010：TemplatingLoader装载模板

头像
followWinter
    阅读 4 分钟

    0x001 概述

    上一章讲的时候关于文件相关的loder，这一章讲的是模板相关的loder。

    0x002 环境配置

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

    0x003 栗子1-html-loader-加载html

    1. 安装依赖包

      $ cnpm install --save-dev html-loader

    2. 编写index.html并引入

      // ./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')

    3. 配置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`
                        }
                    }
                ]
            }
        ]
    }
};

    4. 打包并查看结果

      // ./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-loader

    5. 其他配置

      • removeComments：移除评论

      • collapseWhitespace：删除空格

      • removeAttributeQuotes：删除属性的"号

      • keepClosingSlash：保持标签闭合

      • minifyJS：压缩JS

      • minifyCSS:压缩CSS

    0x004 栗子2-配合extra-loader将html导出成文件

    1. 修改文件

              {
            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
                    }
                }
            ]
        },

    2. 安装依赖

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

    3. 打包并查看结果

      // ./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";

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

    4. 其他更多配置，查看webpack关于html-loader部分

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

    1. 安装依赖

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

    2. 添加配置

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

    3. 调用

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

    4. 打包并查看结果

      
/* 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字符串的函数，并且该函数被封装成模块。

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

    0x006 资源

    webpackjavascript
    followWinter
    1.5k 声望82 粉丝

    暂时没有

    « 上一篇
    从零开始的webpack生活-0x009：FilesLoader装载文件
    下一篇 »
    从零开始的webpack生活-0x011：StylingLoader装载样式

    引用和评论

    推荐阅读
    头像
    活用 Git 撤销，提升工程质量（文末招聘）

    followWinter阅读 1.6k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.7k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新