webpack 插件:string-loader
发布于 8 年前 作者 enmoon 9482 次浏览 来自 分享

string loader for webpack

webpack 插件:把任意的资源文件打包成可require的字符串模板

Installation

npm install string-loader --save-dev

Usage

webpack.config 配置

loaders: [ { test: /\.[name]$/, loader: "string" } ]

示例 1: 把html转换为字符串模板,以便模板引擎使用

webpack.config

loaders: [ { test: /\tpl\.html$/, loader: "string" } ]

list.tpl.html

<ul>
    <% for(var i in list){ %>
        <li><%= list[i].text %></li>
    <% } %>
</ul>

list.js

var Template = require('template'),
    TPL = require('./list.tpl.html');

var html = Template(TPL, [
    {
        text: 'option1'
    },
    {
        text: 'option2'
    }
]);

console.log(html);  //html: '<ul><li>option1</li><li>option2</li></ul>'

示例 2: 把json数据转换为字符串

webpack.config

loaders: [ { test: /\.html|\.json$/, loader: "string" } ]

data.json

[
  {
    "text": "first",
    "value": "first"
  },
  {
    "text": "second",
    "value": "second"
  }
]

index.js

var str = require('./data');

var json = JSON.parse(str);

console.log(json);  //json: [{"text": "first","value": "first"},{"text": "second","value": "second"}]

<br /> 参考:

4 回复

json转字符串 为什么不直接使用 JSON.stringify(json) ?

@yuanzhhh 这是展示怎么把单独文件打包成可require的字符串模板,一般是配合模板引擎,把JS中的view分离成单个文件,独立引用渲染,分层解耦代码结构,当然也可以干点其它的

哈哈,这感觉就像是把 fs.readFileSync 封进了 require 的功能里。

其实放弃 require 这个名字的话,这个库做的事情用 fs.readFileSync 可以轻易做到。

@alsotang 是的,很简单,开发中可以像include调用需要的资源

回到顶部