使用es6模板字符串加载器导入html文件

Question

我想用es6 template string loader将模板导入我的js。我的唯一区别是我不想包含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

考虑使用Raw Loader。

您的网络包配置将包含以下内容：

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

在你的代码中写

import tpl from './mytemplate.html';

Answer 3

我认为您的mongoexport --db (Database name) --collection (Collection Name) --out (File name).json 与此相符：

webpack.config.js

问题是... module: { loaders: [ { test: /\.html$/, loader: "es6-template-string" } ] } ... 使用ES6语法输出导出的模板字符串函数。你仍然需要通过babel传递它。

您的配置应如下所示：

template-string-loader

要使用它，您需要调用作为函数：

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

Answer 4

尝试

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

有关此配置语法的更多信息，请参阅html-loader repo readme

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

Answer 5

我会使用raw-loader代替text-loader，因为它有更多的贡献者，并在webpack文档中正式提到：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

此处发布的解决方案是正确的。只是将信息添加到实现上述解决方案时遇到的错误中。

我收到错误消息：TS2307：找不到模块'./index3.html'
这是因为打字稿编译错误。 解决方法是here

必须定义一个文件：包含以下内容的html.d.ts      declare module '*.html' { const value: string; export default value }