我应该怎么处理webpack上的“module.exports ='html_template_content'”

Question

所以我想用webpack做一个非常简单的任务。

我有一些静态的HTML模板，例如，

的test.html

<div><span>template content</span></div> 

和所有我想要做的就是返回字符串在模板中 如

require("raw!./test.html") 

与应返回喜欢的字符串：

"<div><span>template content</span></div>" 

但相反，它返回以下字符串

"modules.exports = <div><span>template content</span></div>" 

我尝试了几个模块，比如raw-loader和html-loader。 ，它们的行为方式都是一样的。所以我查看了源代码，只是为了发现它的SUPPOSED表现如此。

那么究竟什么是我应该做这个，如果我只想生 HTML？删除前加 “module.exports =”字符串是否是一种不正确的做法？从包 编辑：除去被捆绑的“modules.export =”部分结果返回什么：/

我的配置

module.exports = 
{ 
    module: 
    { 
     loaders: 
      [ 
       { test: /\.html$/, loader: "raw-loader" } 
      ] 
    } 
}; 

Answer 1

我发现使用eval

console.log(eval(require("raw!./test.html"))); 

它确实返回HTML模板， 一个肮脏的解决方法，但我会离开这个解决了辩论，直到我们找到一个更好的。

Answer 2

当你写require('./test.html')这意味着你只需运行该代码由装载机链返回。结果以module.exports的形式导出。要使用这个结果，你需要指定你需要声明的变量：

var htmlString = require('raw!./test.html'); 
//htmlString === "<div><span>template content</span></div>" 

请记住，在任何的WebPack装载机返回JS代码 - 而不是HTML，CSS没有。你可以使用使用这段代码来获取HTML，CSS等等。

Answer 3

的解决办法是要求你的文件没有指定任何额外的装载，因为这已经在的WebPack配置

const test = require('./test.html') 

解释规定：以您目前的代码，你申请的raw装载机两次到您的文件。当您在您的配置中指定装载机链时：

loaders: 
    [ 
     { test: /\.html$/, loader: "raw-loader" } 
    ] 

...你已经讲的WebPack每到这个加载器添加到装载机链您需要匹配test条件（在这里，每一个HTML文件）

因此一个文件，当你写这个

const test = require('raw!./test.html') 

...它实际上相当于这个

const test = require('raw!raw!./test.html')