Что именно я должен делать с "module.exports = 'html_template_content'" в веб-пакете

Question

Поэтому я хочу сделать очень простую задачу с помощью веб-пакета.

У меня есть несколько статических HTML-шаблонов, таких как, например,

test.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" }
            ]
    }
};

Answer 1

Решение состоит в том, чтобы запросить файл без указания какого-либо дополнительного загрузчика, поскольку это уже указано в конфигурации веб-пакета

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.resolve(./test.html) https://nodejs.org/dist/latest-v7.x/docs/api/globals.html

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 и прочего.