Added support for webpack 2 native es2015 modules

[rmarscher]

• Upgraded acorn parser to 3.x for es2015 support.
• Added use of the loader query string to send options to
  the parser.
• Changed updating module.exports with patched functions
  to compare all exports by function prototype as
  webpack uses arbitrary keys for named exports.
• Wrapped the patcher code in an IIFE to make sure
  it doesn't leak scope or overwrite inherited scope.

Unfortunately, adding the IIFE to patcher.js marks most of the lines of code as modified. The only actual code change is lines 73 and 91-98 of the new version which replaces lines 88-90 of the old version.

For each binding, it used to see if the binding name was in the module.exports and replaced that with the patched version. Now, it loops through all of the properties of modules.exports and sees if their function prototype matches the patched function's prototype. If so, it replaces it.

      var exportNames = Object.keys(module.exports); // line 73
      // ... inside bindings.forEach ... lines 91-98
          exportNames.forEach(function(exportName) {
            if (typeof module.exports[exportName] !== 'function') {
              return;
            }
            if (module.exports[exportName].prototype === f.prototype) {
              module.exports[exportName] = patched;
            }
          });

My branch can be tested by installing git+https://github.com/rmarscher/monkey-hot-loader#webpack2-import from npm. It is working great so far for my use case with webpack 2.1.0-beta.4. Thank you!

[rmarscher]

I should also note that you need to update the 'monkey-hot' loader in the webpack config to have a query string that sets sourceType=module. i.e. 'monkey-hot?sourceType=module' I'm not sure if it's possible to automatically determine if this is necessary based off of the information passed to the loader. I added a note about it to the README. If you don't do this, you will see an error when building: Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'.

[QWp6t]

@jlongster

[retyui]

@rmarscher
I try to use your branch monkey-hot-loader#webpack2-import in my project , but it doesn't work.

Error:

ERROR in ./js/theme.js
Module build failed: Error: Final loader didn't return a Buffer or String

package.json

{
    "devDependencies": {
        "monkey-hot-loader": "rmarscher/monkey-hot-loader#webpack2-import",
        "babel-loader": "^7.1.2",
        "webpack": "^3.10.0"
    }
}

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js/,
        use: [ {
            loader: 'monkey-hot-loader',
            options: {
              sourceType: 'module'
            }
          }, 'babel-loader']
      },
  }
}

[rmarscher]

@retyui Sorry I didn't see the notification about this comment. I think I only tested this against webpack 2.1.0. For the most part, I'm using create-react-app now or another package that abstracts most of the webpack setup so I'm not actively using monkey-hot-loader. But yeah, webpack made internal changes with 3.x and 4.x which probably broke this.

I dug in a little bit and realized this pull request wasn't hot reloading default exports. I'm going to close this and submit another one that I got working with webpack4 for reference.

See https://github.com/rmarscher/backend-with-webpack/tree/webpack4 and https://github.com/rmarscher/monkey-hot-loader/tree/webpack4 and new pull request #9.