帶有自定義加載器的熱模塊替換中斷

我編寫了一個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

帶有自定義加載器的熱模塊替換中斷

回答

相關問題