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

我编写了一个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是解决方案，它的工作社科院& 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部分打破是可以理解的。但我不想让它突破。

来源

2015-08-16 Ashton War

require缓存文件。加入：

delete require.cache[this.resourcePath];

紧随你的要求。

来源

2015-08-16 10:18:13

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

回答

相关问题