Импорт html-файлов с помощью загрузчика шаблонов es6

Question

Я хочу импортировать мои шаблоны в мой js с загрузчиком шаблонов es6. Единственная разница в моем случае заключается в том, что я не хочу включать CSS, только HTML. Мой код выглядит следующим образом:

import app from '../../bootstrap.js';
import template from './header.html';

app.component('siteHeader', {
  template
});

и моя ошибка Uncaught SyntaxError: Unexpected token export,

Answer 1

Недавно мне нужно было сделать то же самое, и вот как я это сделал.

1. Я использовал модуль npm html-loader, вместо es6-template-string-loader

2. Добавить в webpack.config.js

Webpack 3

...
module: {
    rules: [
        {
            test: /\.html$/,
            exclude: /node_modules/,
            use: {loader: 'html-loader'}
        }
    ]
}
...

Webpack 1 (устарело, но из оригинального ответа):

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

3. Используйте в своих файлах JS

import template from './header.html';

Answer 2

Решение, размещенное здесь, является правильным. Просто добавляю информацию об ошибке, с которой я столкнулся при реализации упомянутого решения.

Я получил сообщение об ошибке: TS2307: Не удается найти модуль './index3.html'
Это произошло из-за ошибки компиляции машинописного текста. Работа была здесь

Пришлось определить файл: html.d.ts, содержащий следующее

declare module '*.html' {
  const value: string;
  export default value
}

Answer 3

Подумайте об использовании Raw Loader.

Ваша конфигурация веб-пакета будет содержать это:

...
    module: {
        rules: [
            {
                test: /\.tpl.html$/,
                use: 'raw-loader'
            }
        ]
    }
...

В вашем коде напишите

import tpl from './mytemplate.html';

Answer 4

Я полагаю, ваш webpack.config.js в соответствии с этим:

...
module: {
    loaders: [
        {
            test: /\.html$/,
            loader: "es6-template-string"
        }
    ]
}
...

Проблема в том, что template-string-loader выводит экспортированную функцию строки шаблона с использованием синтаксиса ES6. Тебе все еще нужно пройти через Вавилон.

Ваша конфигурация должна выглядеть примерно так:

...
module: {
    loaders: [
        {
            test: /\.html$/,
            loader: "babel?presets[]=es2015!es6-template-string"
        }
    ]
}
...

Чтобы использовать его вам нужно вызвать как функцию:

import app from '../../bootstrap.js';
import template from './header.html';

app.component('siteHeader', {
   template()
});

Answer 5

Я хотел бы использовать raw-loader вместо text-loaderпотому что у него гораздо больше участников, и он официально упоминается в документации веб-пакета: https://webpack.js.org/loaders/raw-loader/

Это более безопасный выбор в долгосрочной перспективе. Ссылка для скачивания: https://www.npmjs.com/package/raw-loader

webpack.config.js

 module.exports = {
      module: {
        rules: [
          {
            test: /\.(tpl|txt)(\?.*)?$/,
            use: 'raw-loader'
          }
        ]
      }
    }

Теперь я могу использовать его для загрузки файла шаблона в виде строки для моих компонентов, например:

import Vue from 'vue'
import MyTemplate from './template.tpl'

Vue.component('my-component',{
   'template' : MyTemplate
})

Answer 6

Пытаться

module: {  
          loaders: [  
           {  
              test: /\.html$/,  
              loader: 'html-loader?exportAsEs6Default',  
           }  
      ]  
  } 

Больше информации об этом синтаксисе конфигурации можно прочитать в html-loader репо readme

https://github.com/webpack-contrib/html-loader