Es6 şablonu dize yükleyicisi ile html dosyalarını içe aktarma

Question

Şablonlarımı es6 template string loader ile js'm içine aktarmak istiyorum. Benim durumumdaki tek fark, css, sadece html eklemek istemiyorum. şöyle Benim kodudur:

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

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

ve benim hata Uncaught SyntaxError: Unexpected token export olduğunu.

Answer 1

Son zamanlarda aynı şeyi yapmaya ihtiyacım vardı ve bunu yaptım.

1. I

2. kaldırıldı webpack.config.js

WebPack 3

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

WebPack 1 (ekle, ancak orijinal es6-template-string-loader yerine, NPM modülü html-loader kullanılan cevap):

sizin JS dosyaları

import template from './header.html'; 

Answer 2

yılında

3. Kullanımı Ben senin webpack.config.js bu çizgisinde olduğunu varsayalım:

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

sorun template-string-loader kullanarak ihraç şablonu dizesi fonksiyonunu verir olmasıdır ES6 sözdizimi. Bunu hala babilden geçmek zorunda kalacaksın.

Konfigürasyonunuz şöyle görünmelidir:

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

aramak gerekir Kullanmak için bir fonksiyonu olarak geçerli:

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

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

Answer 3

Raw Loader kullanmayı düşünün.

Kişisel webpack yapılandırma bu içerecektir:

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

kodunuzu yazma olarak

import tpl from './mytemplate.html'; 

Answer 4

bu yapılandırma sözdizimi üzerine

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

diğer bilgiler deneyin html-loader repo Benioku'da okunabilir

Uzun vadede üzerinde daha güvenli bir seçimdir: çok daha katkıda bulunur ve resmen webpack belgelerinde belirtilen çünkü

https://github.com/webpack-contrib/html-loader#export-formats

Answer 5

ben yerine text-loader ait raw-loader kullanacaktır.İndirme linki:

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

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