带有 ES6 导入的原始加载器

Question

我正在尝试将 ES6 与 webpack 一起使用。javascript 模块导入/导出没问题，但我无法让 raw-loader 工作。

这是我打算在源文件中执行的操作

import template from './template.html'

template.html 文件中包含原始 HTML。

module.exports = {
  context: __dirname,
  entry: [
    'babel-polyfill',
    './app/app.js',
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        include: __dirname + '/app/',
        loader: 'eslint-loader',
      },
    ],
    loaders: [
      {
        test: /\.js$/,
        include: __dirname + '/app/',
        loader: 'babel-loader?presets[]=es2015',
      },
      {
        test: /\.html$/,
        include: __dirname + '/app/',
        loader: 'raw-loader',
      },
    ],
  },
  output: {
    path: './build/',
    filename: 'app.js',
  },
};

当我启动 webpack 时，代码是这样生成的：

  module.exports = "module.exports = \"  hello\\n  <div>\\n    <ul>\\n      <li ng-repeat...

它应该只是"hello\n <div>..."应该导出的字符串。

有什么帮助吗？我真的不明白如何做到这一点。

Answer 1

使用 raw-loader 导入会返回具有默认属性的对象（从 './file' 导入 * 作为模板）。您可以将其命名为 template.default 来获取您想要的内容。

这是类似的问题

在这里，您无法了解如何更新原始加载器的代码以按原样使用导入的值。刚刚修改了一段时间