Raw loader with ES6 imports

Question

I'm trying to use ES6 with webpack. Its okay for javascript module imports/exports, but I can't get raw-loader to work.

Here is what I am intending to do in my source file

import template from './template.html'

The template.html file has raw HTML in it.

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',
  },
};

When I launch webpack, the code is generated as so:

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

It should only be the "hello\n <div>..." string that should be exported.

Any help on this ? I really don't understand how to do this.

Answer 1

Import with raw-loader returns object with default property (import * as template from './file'). You can call it template.default to get what you want.

Here was the similar issue

And here you cant give a glance the way how you can update code of raw loader to use imported value as it is. Just have tinkered with this for a while