博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从零开始的webpack生活-0x010:TemplatingLoader装载模板
阅读量:5823 次
发布时间:2019-06-18

本文共 3878 字,大约阅读时间需要 12 分钟。

0x001 概述

上一章讲的时候关于,这一章讲的是模板相关的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

    hello webpack

    // ./src/index.html
    templating-loader// ./src/index.jsrequire('./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 = "

    hello webpack

    \n";/***/ })/******/ ]);

    可以看到,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-loaderhtml导出成文件

  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. 打包并查看结果

    // ./distcontent.dist.htmlindex.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. 其他更多配置,查看

0x005 栗子3-pug-loaderpug模板解析

  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. 更多资源,请查阅和

0x006 资源

转载地址:http://jgbdx.baihongyu.com/

你可能感兴趣的文章
让你的APP实现即时聊天功能
查看>>
iOS 绝对路径和相对路径
查看>>
使用Openfiler搭建ISCSI网络存储
查看>>
学生名单
查看>>
(转) 多模态机器翻译
查看>>
【官方文档】Nginx负载均衡学习笔记(三) TCP和UDP负载平衡官方参考文档
查看>>
矩阵常用归一化
查看>>
Oracle常用函数总结
查看>>
【聚能聊有奖话题】Boring隧道掘进机完成首段挖掘,离未来交通还有多远?
查看>>
考研太苦逼没坚持下来!看苑老师视频有点上头
查看>>
HCNA——RIP的路由汇总
查看>>
zabbix监控php状态(四)
查看>>
实战Django:小型CMS Part2
查看>>
原创]windows server 2012 AD架构试验系列 – 16更改DC计算机名
查看>>
统治世界的十大算法
查看>>
linux svn安装和配置
查看>>
SSH中调用另一action的方法(chain,redirect)
查看>>
数据库基础
查看>>
表格排序
查看>>
关于Android四大组件的学习总结
查看>>