How to use the parseQuery function from loader-utils

Find comprehensive JavaScript loader-utils.parseQuery code examples handpicked from public code repositorys.

loader-utils.parseQuery is a function that parses a string representation of a query object into an actual JavaScript object.

56
57
58
59
60
61
62
63
64

module.exports = function(source) { // source是字符串,包含静态资源的文件内容
  // webpack2 默认使用缓存,启动webpack-dev-server时,只热更新被修改的模块
  // 如果你想要禁止缓存功能,只要传入fasle参数即可
  // this.cacheable(false);  
  const params = loaderUtils.parseQuery(this.query);
  if (typeof params === "object" && params.signStr && typeof params.signStr === "string") {
    source = '<!-- ' + params.signStr + ' -->\n' + source;
  }
fork icon24
star icon183
watch icon13

+ 11 other calls in file

22
23
24
25
26
27
28
29
30
31
}

this.cacheable();

if (!hasRun){
    var query = loaderUtils.parseQuery(this.query);
    var envOpts = query.opts || {};
    if (query){

        env = new nunjucks.Environment([], envOpts);
fork icon37
star icon81
watch icon0

How does loader-utils.parseQuery work?

loader-utils.parseQuery is a utility function provided by the loader-utils package for parsing a query string from a loader's options object or query string into an object literal.

It internally uses the querystring module of Node.js to parse the query string and return an object containing key-value pairs.

15
16
17
18
19
20
21
22
23
module.exports = function (content) {
  const options = this.options;
  const resourcePath = this.resourcePath;
  const resource = new util.Resource(options.cwd, options.demoSource, resourcePath);

  const query = loaderUtils.parseQuery(this.query);

  const tpl = query.template;
  this.addDependency(tpl);
fork icon13
star icon50
watch icon9

+ 11 other calls in file

12
13
14
15
16
17
18
19
20
21
const filename = loaderUtils.interpolateName(this, name, {
  context: context,
});
const outputDir = options.path || '.';
const plugins = options.plugins || [];
const query = loaderUtils.parseQuery(this.resourceQuery);

const getData = (files) => {
  const outputFilename = files.find((file) =>
    file.endsWith(query.css ? '.css' : '.js')
fork icon2
star icon30
watch icon5

Ai Example

1
2
3
4
5
6
const loaderUtils = require("loader-utils");

const query = '?{"debug":true}';
const options = loaderUtils.parseQuery(query);

console.log(options); // { debug: true }

In this example, loader-utils is used to parse the query string ?{"debug":true} into an object { debug: true } using the parseQuery function. The resulting object can then be used to configure the loader or plugin.

41
42
43
44
45
46
47
48
49
50
51
};


DirectoryLoaderPlugin.loader = function(content) {
    //this.cacheable && this.cacheable();
    //if(!this.emitFile) throw new Error("emitFile is required from module system");
    //var query = loaderUtils.parseQuery(this.query);
    //var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
    //    context: query.context || this.options.context,
    //    content: content,
    //    regExp: query.regExp
fork icon1
star icon0
watch icon0

47
48
49
50
51
52
53
54
55
56
const loaderContext = this

const statCode = process.env.UNI_USING_STAT ? 'import \'@tphone-beta/core/lib/uni-stat\';' : ''

if (this.resourceQuery) {
  const params = loaderUtils.parseQuery(this.resourceQuery)
  if (params) {
    if (params.page) {
      params.page = decodeURIComponent(params.page)
      // import Vue from 'vue'是为了触发 vendor 合并
fork icon0
star icon0
watch icon1

+ 4 other calls in file

247
248
249
250
251
252
253
254
255
256
const loadUtils = require("loader-utils");
let args;
try {
	const p = name && name.indexOf("?");
	if (p > -1) {
		args = loadUtils.parseQuery(name.substring(p));
		name = name.substring(0, p);
	}
} catch (e) {
	console.log("Invalid plugin arguments " + name + " (" + e + ").");
fork icon0
star icon0
watch icon1

+ 3 other calls in file

11
12
13
14
15
16
17
18
19
20
21
22
function randomIdent() {
	return "xxxHTMLLINKxxx" + Math.random() + Math.random() + "xxx";
}


function getLoaderConfig(context) {
	var query = loaderUtils.parseQuery(context.query);
	var configKey = query.config || 'htmlLoader';
	var config = context.options && context.options.hasOwnProperty(configKey) ? context.options[configKey] : {};


	delete query.config;
fork icon0
star icon0
watch icon0

515
516
517
518
519
520
521
522
523
524
  importLoaders: true
}
return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, (m, $1, $2) => {
  // $1: !css-loader
  // $2: ?a=b
  const query = loaderUtils.parseQuery($2 || '?')
  Object.assign(query, OPTIONS, option, DEFAULT_OPTIONS)
  if (index !== -1) {
    // Note:
    //   Class name is generated according to its filename.
fork icon0
star icon0
watch icon0

+ 2 other calls in file

21
22
23
24
25
26
27
28
29
30
}

// The following part renders the tempalte with lodash as aminimalistic loader
//
// Get templating options
const options = this.query !== '' ? loaderUtils.parseQuery(this.query) : {};
const template = _.template(source, _.defaults(options, { variable: 'data' }));
// Require !!lodash - using !! will disable all loaders (e.g. babel)
return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
  'module.exports = function (templateParams) { with(templateParams) {' +
fork icon0
star icon0
watch icon0

7
8
9
10
11
12
13
14
15
16
self.cacheable && this.cacheable();
if (!self.emitFile) throw new Error('emitFile is required from module system');
if (!self.async) throw new Error('async is required');

var callback = self.async();
var query = loaderUtils.parseQuery(self.query);
var pathPrefix = loaderUtils.interpolateName(self, query.outputFilePrefix, {
  context: query.context || this.options.context,
  content: content,
  regExp: query.regExp
fork icon0
star icon0
watch icon0

19
20
21
22
23
24
25
26
27
28
var context   = this;
var callback  = context.async();
var ctxOpts   = context.svgReactLoader;
var filters   = ctxOpts && ctxOpts.filters || [];
var query     = lutils.getOptions(context);
var rsrcQuery = context.resourceQuery && lutils.parseQuery(context.resourceQuery);
var params    = R.merge(query || {}, rsrcQuery || {});

var titleCaseDelim = params.titleCaseDelim || /[._-]/;
var displayName    = params.name || titleCaseBasename(context.resourcePath, titleCaseDelim);
fork icon0
star icon0
watch icon0

21
22
23
24
25
26
27
28
29
30
}

// The following part renders the tempalte with lodash as aminimalistic loader
//
// Get templating options
var options = loaderUtils.parseQuery(this.query);
// Webpack 2 does not allow with() statements, which lodash templates use to unwrap
// the parameters passed to the compiled template inside the scope. We therefore
// need to unwrap them ourselves here. This is essentially what lodash does internally
// To tell lodash it should not use with we set a variable
fork icon0
star icon0
watch icon0