webpack通过内联loader的方式获取样式文件（css、less、scss）的字符串内容（并压缩）

解决的问题：

js想获取样式文件（css、less、scss）中的字符串内容时，可以通过

// npm install raw-loader less-loader
require('!!raw-loader!less-loader!.style.less').default.toString()

的方式获取；但这种方式获取的css内容无法压缩。

解决：

// npm install css-loader postcss-loader postcss less-loader
require('!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!less-loader!./style.less').default.toString();

优化：

因为require无法使用变量，所以每次都需要写很长的前缀；所以将压缩功能封装成一个自定义的webpack loader，隐藏其中的压缩工作：

raw-loader.js

module.exports = function rawLoader() {
  
}
module.exports.pitch = function(remainingRequest) {
  const loaderUtils = require('loader-utils');
  const requestPath = loaderUtils.stringifyRequest(this, `!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!${remainingRequest}`);

  return `var styleModule = require(${requestPath});module.exports = (styleModule.default || styleModule).toString();`;
}

使用：

require('!!./raw-loader.js!less-loader!./style.less');
require('!!./raw-loader.js!./style.css');