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 <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.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 = "<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
-
其他配置
removeComments
:移除评论collapseWhitespace
:删除空格removeAttributeQuotes
:删除属性的"
号keepClosingSlash
:保持标签闭合minifyJS
:压缩JSminifyCSS
:压缩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官网