Make webpack's library output compatible with babel6

Question

Babel\'s 6th version changes the functioning of export default and in particular its relation with commonjs require.

To summarise, while un

Answer 1

You can use this solution (this is more like workaround, but it allow you to keep your sources from change):

There is a loader called callback-loader. It allow you to change your sources in a build time by calling a callback and put a result instead of it. In other words you can turn all you require('module') into a require('module').default automatically in a build time.

Here is your config for it:

var webpackConfig = {
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'callback' },
            ...
        ]
    },
    ...
    callbackLoader: {
        require: function() {
            return 'require("' + Array.prototype.join.call(arguments, ',') + '").default';
        }
    }
};

Answer 2

Was just going at this my self. Whether one like to call it a workaround or solution, there seem to be a Babel plugin that "solve it".

Using the plugin babel-plugin-add-module-exports as referenced in https://stackoverflow.com/a/34778391/1592572

Example config

var webpackOptions = {
    entry: {
        Lib1: './src/Lib1.js',
        Lib2: './src/Lib2.js'
    },
    output: {
        filename: "Master.[name].js",
        library: ["Master","[name]"],
        libraryTarget: "var"
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ["add-module-exports"]
                }
            }
        ]
    }
};

This yields Master.Lib1 to be lib1 instead of Master.Lib1.default.

Answer 3

Webpack 2 now supports es6 modules which partially solves this issue. Migrating from webpack 1 to webpack 2 is relatively painless. One just need to remember to disable babel's es6 module to commonjs conversion to make this work:

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

However, unfortunately, it does not work properly with export default (but an issue is opened, hopefully a solution will be released eventually).

EDIT

Good news! Webpack 3 supports the output.libraryExport option that can be used to directly expose the default export:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    lib: [ path.resolve(__dirname, "src/main.js") ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "mylib-build.js",
    library: "myLib",
    // Expose the default export.
    libraryExport: "default"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel",
        include: path.resolve(__dirname, "src")
      }
    ]
  }
};