在webpack上，我应该怎么做“module.exports ='html_template_content'”

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

我有几个像例如静态的HTML模板

的test.html

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

我想要做的就是返回模板内的string，例如

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

与应该返回一个string，如：

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

但相反，它返回以下string

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

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

那么，如果我只是想要原始的HTML，我到底想要做什么呢？ 删除前面的“module.exports =”string是不是一个坏习惯？ 从捆绑编辑：删除'modules.export ='部分结果束没有返回：/

我的configuration

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

Answer 1

解决scheme是要求你的文件没有指定任何额外的加载器，因为这已经在webpackconfiguration中指定

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

说明：使用您当前的代码，您将raw加载器两次应用于文件。 当你在你的configuration中指定一个装载器链时：

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

…你已经告诉webpack每次你需要一个符合test条件的文件（这里是每个html文件）

所以，当你写这个

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

这实际上相当于这个

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

Answer 2

当你写require('./test.html')这意味着你只需要运行由加载器链返回的代码。 结果在这个代码中被导出为module.exports 。 要使用此结果，您需要将您的require语句分配给variables：

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

请记住，Webpack中的任何加载器都会返回JS代码 – 而不是HTML，而不是CSS。 你可以使用这个代码来获取HTML，CSS等等。

Answer 3

我发现使用eval的一个肮脏的解决方法

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

它确实返回了html模板，但是我将离开这个解决scheme，直到find更好的解决scheme。