14

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

我有一些静态 HTML 模板,例如

测试.html

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

我要做的就是返回模板内的字符串,例如

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

with 应该返回一个字符串,如:

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

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

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

我尝试了几个模块,比如 raw-loader 和 html-loader。而且它们的行为方式相同。所以我查看了源代码,只是为了发现它应该以这种方式运行。

原始模块源代码

那么,如果我只想要原始 HTML,我到底应该怎么做呢?仅删除前置的“module.exports =”字符串是一种不好的做法吗?从捆绑编辑中:删除“modules.export =”部分会导致捆绑不返回任何内容:/

我的配置

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

3 回答 3

11

解决方案是要求您的文件而不指定任何其他加载程序,因为这已经在 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')
于 2017-04-07T23:31:45.130 回答
0

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

于 2018-04-27T16:07:41.840 回答
-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 等。

于 2016-08-01T07:35:50.800 回答