Javascript 使用es6模板字符串加载程序导入html文件

我想将我的模板导入到我的js中。我的例子中唯一的区别是我不想包含css，只想包含html。我的代码如下：

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

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

---

我的错误是

未捕获的语法错误：意外的令牌导出

我最近也需要做同样的事情，我就是这样做的

1。我使用了npm模块，而不是

es6模板字符串加载程序

2.添加到

webpack.config.js

网页第3页 网页包1（已弃用，但来自原始答案）： 3.在JS文件中使用

import template from './header.html';

---

我假设您的

webpack.config.js

是这样的：

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

问题是

模板字符串加载器

使用ES6语法输出导出的模板字符串函数。你仍然需要通过巴贝尔

您的配置应该如下所示：

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

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

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

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

考虑使用

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

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

在您的代码中编写

import tpl from './mytemplate.html';

试一试

有关此配置语法的更多信息，请参阅

html加载程序
repo自述文件

我会使用
原始加载器
而不是
文本加载器
，因为它有更多的贡献者，并且在网页文档中正式提到：

从长远来看，这是一个更安全的选择。下载链接：

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
})

这里发布的解决方案是正确的。只是在实现上述解决方案时遇到的错误中添加了一个信息

我收到错误：TS2307:找不到模块'./index3.html'

这是因为typescript编译错误。
周围的工作是

必须定义一个文件：html.d.ts，其中包含以下内容

声明模块'*.html'{
常量值：字符串；
导出默认值
}
从“/header.html”导入模板时出现错误“找不到模块”
@ShyamalParikh，您的html文件名为
header.html
，它是否与您要导入的JS文件位于同一目录中？另外，您使用的是什么版本的webpack？使用webpack 3.5.6。是的，用同样的name@ShyamalParikh，您在网页包配置中是否有解析根集？另外，如果您可以将webpack.config添加到JSFIDLE或其他东西中，我可以采取更好的方法look@ShyamalParikh，当路径或文件名不正确时，我会收到相同的错误。如果JS文件和HTML文件位于同一目录中，则路径（
/header.HTML
）的开头是否为
？
module: {  
          loaders: [  
           {  
              test: /\.html$/,  
              loader: 'html-loader?exportAsEs6Default',  
           }  
      ]  
  } 

 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
})