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

jk_v1 发布于2019-08-21 17:31 / 1985人阅读

摘要：概述上一章讲的时候关于文件相关的，这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到，被打包成了字符串，并封装成模块导出。更多资源，请查阅的仓库和官网资源源代码

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

安装依赖包

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

打包并查看结果

// ./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被打包成了字符串，并封装成模块导出。
注意：看配置文件，除了配置一个html-loader，还配置了一个url-loader，因为当时，会解析为require("./../res/icon.jpg"),因此，需要一个loader来解析这个资源，所以配置了一个url-loader

其他配置

removeComments：移除评论

collapseWhitespace：删除空格

removeAttributeQuotes：删除属性的"号

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张三u003Cu002Fpu003E";;return pug_html;};
module.exports = template;

/***/ }),
...

可以看到pug内容被打包成了一个返回html字符串的函数，并且该函数被封装成模块。

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

0x006 资源

源代码

专线服务云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89622.html

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ 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 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x012：TranspilingLoader装载脚本

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖 0x001 概述上一章讲的是样式装载相关的loader，这一章见得是脚本加载相关的loader 0x002 环境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x013：LintingLoader格式校验

摘要：概述上一章讲的是脚本装载相关的，这一章见得是脚本格式校验相关的环境配置使用校验格式这份配置是偷的安装依赖包修改配置文件添加配置文件编写测试代码张三打包输出张三 0x001 概述上一章讲的是脚本装载相关的loader，这一章见得是脚本格式校验相关的loader 0x002 环境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...

ephererid 2019-08-21 17:32 评论0 收藏0