All Projects → TheLarkInn → virtual-dependency-loader

TheLarkInn / virtual-dependency-loader

Licence: MIT license
webpack loader that takes a single file, and declare pieces of that file as "dependencies" as if it existed.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to virtual-dependency-loader

Angular Router Loader
A Webpack loader that enables string-based module loading with the Angular Router
Stars: ✭ 194 (+487.88%)
Mutual labels:  webpack-loader
gzip-loader
[DEPRECATED] gzip loader module for webpack
Stars: ✭ 15 (-54.55%)
Mutual labels:  webpack-loader
css-raw-loader
🌁 CSS Raw loader module for Webpack
Stars: ✭ 13 (-60.61%)
Mutual labels:  webpack-loader
Exports Loader
Exports Loader
Stars: ✭ 205 (+521.21%)
Mutual labels:  webpack-loader
Vue Template Loader
Vue.js 2.0 template loader for webpack
Stars: ✭ 253 (+666.67%)
Mutual labels:  webpack-loader
image-minimizer-webpack-plugin
Webpack loader and plugin to compress images using imagemin
Stars: ✭ 180 (+445.45%)
Mutual labels:  webpack-loader
Css Modules Typescript Loader
Webpack loader to create TypeScript declarations for CSS Modules
Stars: ✭ 172 (+421.21%)
Mutual labels:  webpack-loader
webpack-webmanifest-loader
Minimalistic webpack loader to generate webmanifest file (and process icons URLs).
Stars: ✭ 16 (-51.52%)
Mutual labels:  webpack-loader
sizeof-loader
Webpack loader that works like url-loader (or file-loader) but with extracted information such as image dimensions and file-size.
Stars: ✭ 20 (-39.39%)
Mutual labels:  webpack-loader
fengari-loader
Webpack loader for fengari
Stars: ✭ 27 (-18.18%)
Mutual labels:  webpack-loader
Svg Url Loader
A webpack loader which loads SVG file as utf-8 encoded DataUrl string.
Stars: ✭ 217 (+557.58%)
Mutual labels:  webpack-loader
One Loader
Single-file components for React
Stars: ✭ 233 (+606.06%)
Mutual labels:  webpack-loader
vue-hot-reload-loader
Enable hot module replacement (HMR) on your Vue components
Stars: ✭ 20 (-39.39%)
Mutual labels:  webpack-loader
String Replace Loader
Replace loader for Webpack
Stars: ✭ 205 (+521.21%)
Mutual labels:  webpack-loader
angular-hmr-loader
🔥 Angular HMR Webpack Loader by @AngularClass
Stars: ✭ 32 (-3.03%)
Mutual labels:  webpack-loader
Polymer Webpack Loader
WebPack Loader for Polymer Web Components
Stars: ✭ 192 (+481.82%)
Mutual labels:  webpack-loader
jsx-compress-loader
⚛️JSX optimisation loader to reduce size of React application
Stars: ✭ 40 (+21.21%)
Mutual labels:  webpack-loader
react-spa-template
This is a sample template for single page applications built using React + Router to work with webpack dev server
Stars: ✭ 19 (-42.42%)
Mutual labels:  webpack-loader
lodash-loader
Cherry-picks Lodash functions and require them explicitly to reduce the webpack bundle size.
Stars: ✭ 13 (-60.61%)
Mutual labels:  webpack-loader
webpack-demos
webpack小练习
Stars: ✭ 17 (-48.48%)
Mutual labels:  webpack-loader

virtual-dependency-loader

Take a single file, process pieces of that file as "dependencies" in loader chain. This is traditionally leveraged inside of other loaders.

Usage

Installation

npm install --save virtual-dependency-loader

Inside of another loader implementation

loader.js

import querystring from 'querystring';
import {stringifyRequest} from 'loader-utils';

export default function someLoader(source, map, ast) {
  const [normalSource, virtualizedSource] = source.split("__virtual_dependency__");
  const {loadModule, resourcePath, async} = this;
  const callback = async();
  const dummyFilePath = path.resolve(__dirname, "../dummy-file.js");

  const inlineLoaderOptions = queryString.stringify({
    code: virtualizedSource,
    filename: `${resourcePath}.script.js`
  });

  const resource = stringifyRequest(`virtual-dependency-loader?${inlineLoaderOptions}!${dummyFilePath}`)

  const virtualizedSourceProcessedByOtherLoaders = loadModule(resource, (err, code, map) => {
    const newSource = [normalSource, code].join("__virtual_dependency__");

    callback(null, newSource);
  });
};

file-that-was-ran-through-loader.js

var hello = "hello";

/* __virtual_dependency__ */
class Bar {
  constructor(foo) {
    this.foo = foo;
  };

  print() {
    console.log(this.foo);
  }
}

const baz = new Bar(hello);

Credit

Hats off to Jason Miller for this idea while he was working on his (vue/polymer/sfc)=>preact compiler/loader.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].