Question

我编写了一个CSS预处理器，它接受JSON作为源代码..以及一个动态生成JSON并将其提供给预处理器的webpack加载器。

例如header.gss：

import config from 'views/header.config.json';

export default function Header() {
  return {
    header: {
      position: 'fixed',
      height: config.height,
      backgroundColor: '#eee',
      _a: {
        color: '#333',
        $hover: {
          color: '#000'
        }
      }
    }
  }
}

呈现给：

.header { position: fixed; height: 50px; background-color: #eee; }
.header > a { color: #eee; }
.header > a:hover { color: #000; }

动态生成JSON使其非常强大。不幸的是，使用50多个样式表，构建过程需要大约12秒，这是一个发展障碍。

HMR是解决方案，它适用于SASS＆amp; ES7 JS但不是我的自定义解析器：

[WDS] App updated. Recompiling...
[WDS] Nothing changed.

webpack服务器正在创建新的捆绑包，但没有热门更新。这是我的装载机来源：

var queryString = require('query-string');

var root = __dirname.split('/').slice(0, -2).join('/');
process.env.NODE_PATH = root + ':' + root + '/src';
require('module').Module._initPaths();
require('babel/register')();

module.exports = function() {
  if (this.cacheable) this.cacheable();
  var options = queryString.parse(this.query);
  var jsonToCss = require('../gss/jsonToCss');
  var config;
  try {
    config = require(options.c);
  } catch (e) {
    config = 'Could not resolve ' + options.c;
  }
  const css = jsonToCss(require(this.resourcePath)(config || {}));
  return css;
};

这显然是一个黑客攻击，所以webpack部分破解是可以理解的。但我不想让它破裂。

热模块更换中断了w /自定义加载器

0 个答案: