How to set up webpack.config.js with babel-preset-env?

Question

Does anybody know or have a webpack.config.js file that uses babel-preset-env? If so, please share.

Here is the config file:

const path = require('path');
const webpack = require('webpack');
const APP_DIR = path.resolve(__dirname, 'js');

module.exports = {
    entry: {
        app: "./app/javascript/app-one.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include : [
                APP_DIR,
                path.resolve(__dirname, 'node_modules/jquery')
            ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        modules: true,
                        presets: ['env',
                            {
                                "targets": {
                                    "node": "current"
                                }
                            }
                        ]
                    }
                }
            }
        ]
    },
    node: {
        fs: "empty"
    },
    output: {
        path: path.resolve("./app/temp/scripts"),
        filename: "[name].bundle.js"
    }
};

Answer 1

I think the misunderstanding you are having is that you set the target to be node: current.

preset-env only transpiles that which is necessary to support the target you are looking to support. See here: http://2ality.com/2017/02/babel-preset-env.html

Also, Node support for ES2015 is pretty solid (https://kangax.github.io/compat-table/es6/) so I would assume not much has to be transpiled.

If you want to transpile to ES5 then you should set target to for example IE 10. Most current environments have very high support for ES6 so transpilation will be minimal if at all (which is good).