L'importation des fichiers html avec es6 chaîne de modèle de chargeur

Je veux importer mes modèles dans mon js avec es6 chaîne de modèle de chargeur. La seule différence dans mon cas, c'est que je ne veux pas inclure css, html uniquement. Mon code est comme suit:

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

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

et mon erreur est Uncaught SyntaxError: Unexpected token export.

OriginalL'auteur Tomek Buszewski | 2016-06-14

javascript webpack

28

J'ai récemment eu besoin de faire la même chose, et c'est la façon dont je l'ai fait.

1. J'ai utilisé le module npm html-chargeur, au lieu de es6-template-string-loader

2. Ajouter à webpack.config.js

Webpack 3
```
...
module: {
    rules: [
        {
            test: /\.html$/,
            exclude: /node_modules/,
            use: {loader: 'html-loader'}
        }
    ]
}
...
```
Webpack 1 (obsolète, mais à partir de l'original):
```
...
module: {
    loaders: [
        {
            test: /\.html$/,
            loader: "html-loader"
        }
    ]
}
...
```
3. Utiliser dans vos fichiers JS
```
import template from './header.html';
```
Donne une erreur "Impossible de trouver le module" sur import template from './header.html';
est de votre fichier html nommé header.html, et il est situé dans le même répertoire que le fichier JS que vous importez? Aussi, quelle est la version de webpack utilisez-vous?
À l'aide de webpack 3.5.6. Oui avec le même nom
Se même erreur avec le fichier de réponse.
avez-vous un résoudre de racine ensemble sur le webpack config? Aussi, si vous pourriez ajouter à votre webpack.config pour un JsFiddle ou quelque chose, je peux prendre un meilleur regard

OriginalL'auteur KevBot

Envisager d'utiliser Raw Chargeur.

Votre webpack configuration contiendra ceci:

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

Dans votre code à écrire

import tpl from './mytemplate.html';

OriginalL'auteur Artemy

Je suppose que votre webpack.config.js est le long des lignes de cette:

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

Le problème est que template-string-loader sorties exporté chaîne de modèle de fonction à l'aide de ES6 syntaxe. Vous aurez toujours besoin de passer que par le biais de babel.

Votre configuration devrait ressembler à quelque chose comme ceci:

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

Pour l'utiliser, vous devez d'appel est une fonction:

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

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

OriginalL'auteur ijmacd

Essayer

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

Plus d'infos sur cette config syntaxe peut être lu dans html-loader repo readme

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

OriginalL'auteur JabbyPanda

1

Je voudrais utiliser raw-loader au lieu de text-loader, parce qu'il a beaucoup plus de contributeurs et c'est officiellement mentionné sur le webpack documentation: https://webpack.js.org/loaders/raw-loader/

C'est un choix plus sûr sur le long terme. Lien de téléchargement: https://www.npmjs.com/package/raw-loader

webpack.config.js
```
 module.exports = {
      module: {
        rules: [
          {
            test: /\.(tpl|txt)(\?.*)?$/,
            use: 'raw-loader'
          }
        ]
      }
    }
```
Maintenant, je peux l'utiliser pour charger un fichier de modèle comme une chaîne de caractères pour mes composants, comme:
```
import Vue from 'vue'
import MyTemplate from './template.tpl'

Vue.component('my-component',{
   'template' : MyTemplate
})
```
OriginalL'auteur András Endre

Vous devez vous connecter pour publier un commentaire.

Webpack 3

Webpack 1 (obsolète, mais à partir de l'original):