adds ability to export module as es6 deafult export

[laland]

Please check if the PR fulfills these requirements

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

• Feature

What is the current behavior?
currently html is exported via module.exports

What is the new behavior?
adds ability to export html as es6 default export (via exports.default) when exportAsEs6Default config param is set

Does this PR introduce a breaking change?

• No

[codecov-io]

Current coverage is 96.66% (diff: 100%)

Merging #97 into master will increase coverage by 0.03%

@@             master        #97   diff @@
==========================================
  Files             2          2          
  Lines            89         90     +1   
  Methods          11         11          
  Messages          0          0          
  Branches         15         16     +1   
==========================================
+ Hits             86         87     +1   
  Misses            3          3          
  Partials          0          0          

Powered by Codecov. Last update 74fcfb3...25206b3

[sokra]

Doesn't look correct to me.

Shouldn't it be exports default instead of exports.default =

[hemanth]

var exportsString = config.exportAsEs6Default? "exports.default": "module.exports";

I read it as exports default //cc @laland

[laland]

What about to add exportAsDefault to do exports.default and change exportAsEs6Default to actually export es6 default that is exports default? exportAsDefault is needed when transpiling es6 to 5 while using default imports, like i do, and that`s what guys at #47 are asking for.

[laland]

what you think @hemanth?

[hemanth]

SGTM for now.

[laland]

@hemanth, pls take a look at #99

[asadsahi]

@laland will this pull request fix this issue asked on stack overflow regarding html templates used to beloaded with require syntax?

[laland]

yep it will, but you should replace require with import. So this example:

export class MyComponent implements ng.IComponentOptions {
    public template: string = require('./mytempalte.html');
    public controller = MyControllerClass;
}

...should be tweaked this way:

import template from './mytempalte.html';

export class MyComponent implements ng.IComponentOptions {
    public template: string = template;
    public controller = MyControllerClass;
}

and config soulbe like this:

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

and beware of merging of #99 which may alter some behaviour

[asadsahi]

Thanks @laland . Is it possible to try this right now somehow?

[laland]

it's already merged, just try.

[asadsahi]

how to target the merged branch instead v0.4.4.

[laland]

oh, snap... yes, it's not yet released... try to use giturl instead of version:

// package.json
devDependecies: {
    "html-loader": "git@github.com:webpack/html-loader.git"
}

here's some docs about it: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

[callistino]

I'm trying to get this new import html syntax to work with typescript but I'm not getting anywhere. I'm sure is something silly and I don't want to create an issue for it if it can be fixed easily.

I'm trying:

import template from './mytempalte.html';

and I'm getting:

error TS2307: Cannot find module './mytemplate.html'

// package.json
devDependecies: {
    "html-loader": "git@github.com:webpack/html-loader.git",
    "ts-loader": "^1.2.2",
}

// webpack.config.js
module: {
        loaders: [
            {test: /\.tsx?$/, loader: "ts-loader"},
            {test: /\.html$/, loader: 'html-loader?exportAsEs6Default'},
            //...
        ]
    },

Update: Found the solution

I added this to my custom typings:

// ...
declare module "*.html";
// ...

[LeoAref]

@callistino Thanks for your update, this solved the problem

And generally I want to mention something. If you're using tsc and your target is es5 like

{
  "compilerOptions": {
    ...,
    "target": "es5",
    ...
  }
}

You have to use

{
  test: /\.html$/,
  loader: 'html?exportAsDefault'
}

So use exportAsDefault or exportAsEs6Default according to your target

[laland]

You can target es5 but set module to es6 and then use exportAsEs6Default, this can be useful with webpack2/typescript setup