1. string-loader
string loader for webpack
string-loader
Package: string-loader
Created by: enmoon
Last modified: Mon, 27 Jun 2022 01:01:50 GMT
Version: 0.0.1
License: ISC
Downloads: 4,162
Repository: https://github.com/enmoon/string-loader

Install

npm install string-loader
yarn add string-loader

string loader for webpack

webpack loader: resource file transform to string

Installation

npm install string-loader --save-dev

Usage

webpack.config setting

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

Example 1: html transform to string template

webpack.config

 loaders: [ { test: /\.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>'

Example 2: josn transform to string template

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"}]

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin