角分量中的条件模板或模板url

Question

假设我有以下组件。用webpack把它捆在一起。模板是必需的，因此它是内联的。

@Component({
    selector: 'date-picker',
    template: require('./date-picker.html'),
})

然而，这意味着更改标记是很乏味的，因为我必须经历捆绑过程，这个过程最多需要5-10秒。我想要的是在生产构建时保留对模板的需求，但是在开发期间有一个模板url，这样我就可以不用捆绑就可以更改标记。但是，当创建生产包时，所有模板都内联到包中。

有什么办法让这事发生吗？最好的方法是创建自己的webpack插件吗？这不是已经存在了吗？

向莫顿问好

Answer 1

最后，我为Webpack创建了自己的加载程序，它使用regex搜索和替换模板: require('.some.html')和指向同一文件夹中的文件的templateUrl。同时适用于mac和windows。唯一的要求是，类型记录文件和html文件都需要位于同一个文件夹中。然后，这将只应用于开发构建，您不希望每次更改标记文件时运行webpack。对于prod，需求仍将在包中嵌入模板。

我的加载程序的内容最后看起来像下面的代码。连接为webpack装载机.webpack的装载机文档

/*
This loader can replace template: require to templateUrls for angular components as long as they live inside the 
same folder as the component itself. This is in particular very useful for development builds to avoid having to 
run webpack everytime you change an html file.
*/

module.exports = function(source) {

//If there's no match, we're not processing a Component file.
var groups = source.match(`template: require\\('.*.html.*'\\)`);
if (groups == null)
{
    return source;
}


var resourcePath = this.resourcePath;
var regex = new RegExp(/\//g);

//To support OSX and win paths we replace / which is part of OSX paths to process the same way.
resourcePath = resourcePath.replace(regex,'\\');

//Find a relative path to the resource relative to the apps folder.
var relativePathForAppsFolder = resourcePath.substr(resourcePath.indexOf('\\app\\'))
relativePathForAppsFolder = relativePathForAppsFolder.replace(/\\/g,'/');

//Get the path without the filename to support html files and js files not sharing the same name minus the extension.
var pathWithoutFolder = relativePathForAppsFolder.substr(0, relativePathForAppsFolder.lastIndexOf('/'))


//To support having different names on the file and ts file we take the content of the group in our regex which would be the html file name.
var matchedString = groups[0].split('\''); 
var value = matchedString[1];  
value = value.replace('./','');
var combined = pathWithoutFolder + '/' + value;

//now we're changing to template url for dev builds instead of inline inside webpack bundle.
source = source.replace(/template: require\('.*.html.*'\)/,'templateUrl: \'' + combined + '\'')
return source;
}