我应该怎么做＆＃34; module.exports =＆＃39; html_template_content＆＃39;＆＃34;在webpack上

Question

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

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

的test.html

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

我想做的就是在模板中返回字符串 e.g

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

with应该返回一个字符串，如：

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

但是，它返回以下字符串

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

我尝试了几个模块，比如raw-loader和html-loader。 并且它们都表现出相同的方式。所以我看了一下源代码，只是为了发现它的行为是这样的。

  

所以，如果我只想要原始的话，我对此的期望是什么呢？   HTML？删除前置是不好的做法   ＆＃34; module.exports =＆＃34;串？从捆绑   编辑：删除＆＃39; modules.export =＆＃39;部分结果是bundle没有返回任何内容：/

我的配置

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

Answer 1

解决方案是要求您的文件而不指定任何其他加载器，因为这已在webpack配置中指定

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

说明：使用当前代码，您将raw加载程序两次应用于您的文件。在配置中指定加载程序链时：

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

...每次你需要一个匹配test条件的文件（这里是每个html文件）时，你已经告诉webpack将这个加载器添加到加载器链中

因此，当你写这个

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

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

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

Answer 2

我终于想通了。您需要使用require.resolve(./test.html) https://nodejs.org/dist/latest-v7.x/docs/api/globals.html#globals_require

解析路径名称

Answer 3

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

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

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