Export an ES Module instead of CommonJS module

[SpaceK33z]

Since webpack v2, it's better to use ES modules. Note that this is incompatible with webpack v1, so it should be released as a major version.

Fixes #96.

[jskrzypek]

Shouldn't this be behind a loader option that defaults to the ES type export?
Something like file-loader?export=commonjs or file-loader?export=es.
Sort of related, a nice enhancement would let you accept a template like these, to allow other types of exports:

"file-loader?export='export * from <%>;'"
"file-loader?export='export = <%>;'"

[SpaceK33z]

@jskrzypek Could you explain a use case for this? If you're making a library it wouldn't matter what export type you use here.

[alexgorbatchev]

It matters because different languages transpile to different import statements, for example TypeScript.

if you have module.exports = ... with TypeScript you have to declare import * as content from .... With proper ES module however, you can declare import content from ....

[alexgorbatchev]

I would also prefer this to be an option, no need for a major release IMO.

[alexgorbatchev]

You can also patch this with a custom loader relatively easily

export default function (content) {
  if (this.cacheable) this.cacheable();
  return `
    Object.defineProperty(exports, "__esModule", { value: true });
    ${content.replace(/^module\.exports =/, 'exports.default =')}
  `;
}

[jskrzypek]

@alexgorbatchev fwiw you can use the allowSytheticDefaultImports compiler option in your tsconfig to make the import content from '...'; statement work in TS

[alexgorbatchev]

@jskrzypek thanks for the tip! I just read up on this option and tried it. Unfortunately it didn't achieve the same effect, the doc says it only affects type checking. The loader I posted above seems to be the best solution (that I have found so far).

[jskrzypek]

One of the uae cases is is you want to name the exported contents so as to not use the default export (which sometimes causes headches for anyone handling your lib with other bundlers)

In that case you could do something like this:

import { fileContents } from 'file?export="export { <%> as fileContents };"!my-file.txt'

Since the point of this whole PR is that we're doing things "better", it's probably better to use named exports since the CommonJS spec doesn't even allow for default/unnamed exports, strictly speaking

[jskrzypek]

@alexgorbatchev interesting it was largely undocumented last I checked... I guess i should read up on it again

[michael-ciniawsky]

Will be done via webpack-defaults upgrade

[wclr]

So for typescript have to do:

import myFont = require('./fonts/my-font.otf')

allowSyntheticDefaultImports seem do not help.

isn't this going to change?

[michael-ciniawsky]

@whitecolor Unfortunately It's not possible to export a ES2015 Module atm bc of the css-loader asset resolving algo depending on a CJS Module (require()). But this will change the moment we update the css-loader (WIP)