我应该在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.并且它们都表现出相同的方式.所以我看了一下源代码,只是为了发现它支持这种方式.

那么,如果我只是想要原始HTML,那么我对此的期望是什么？删除前置的"module.exports ="字符串是不好的做法？从bundle编辑:删除'modules.export ='部分结果在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" }
    ]

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

因此,当你写这个

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

......它实际上相当于此

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

Answer 2

当您编写时，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 等。