带有自定义加载器的热模块更换中断

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 和 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;
};

这显然是一个 hack，所以 webpack 部分损坏是可以理解的。但我不想让它坏掉。

Answer 1

require 缓存文件。添加：

delete require.cache[this.resourcePath];

在您提出要求后立即执行。

带有自定义加载器的热模块更换中断

Hot Module Replacement breaks w/ custom loader

javascript

preprocessor

webpack

babeljs