How can i use es6 in webpack config js

Using ES6 in webpack.config.js typically involves the following steps:

1. Leveraging Node.js's Native ES6 Support

Since Webpack operates within a Node.js environment and Node.js natively supports most ES6 features, you can directly utilize most ES6 syntax in webpack.config.js. For example, you can use const and let instead of var, and arrow functions, among others.

javascript
const path = require('path');

module.exports = {
  // ES6 arrow function
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Other configurations...
};

2. Transpiling ES6+ with Babel

If you wish to utilize more advanced ES6 features or higher ECMAScript versions such as ES7/ES8, you may need to use Babel to transpile these codes so they can run in Node.js.

To use Babel in webpack.config.js, follow these steps:

Installing Babel

First, install the necessary Babel dependencies.

bash
npm install --save-dev @babel/core @babel/preset-env @babel/register

Configuring Babel

Then, create a .babelrc file to configure Babel.

json
{
  "presets": ["@babel/preset-env"]
}

Using Babel Registration Hook

Finally, add the following code at the top of the webpack.config.js file to register Babel's transpilation process.

javascript
require('@babel/register');

This enables you to use full ES6+ syntax in the webpack.config.js file.

javascript
import path from 'path';

export default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Other configurations...
};

However, note that while this approach allows you to write configuration files using ES6+ syntax, it may slightly slow down the build process startup due to additional transpilation steps.

Summary

In modern Node.js versions, many ES6 features are natively supported, so you can directly use them in webpack.config.js. If you need to use features beyond Node.js's native support, you can integrate Babel. Both approaches help you use ES6+ syntax in webpack.config.js, making your configuration files more modern and maintainable.

This is how I use webpack 4:

json
"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

You can clearly see how each dependency is used, so there will be no surprises.

Note that I'm using webpack-serve with --require, but if you prefer to use the webpack command instead, replace it with webpack --config-register. Regardless of which approach you take, @babel/register is necessary for this to work.

That's it!

yarn dev

And you can use ES6 in the configuration!

---

For webpack-dev-server, use the same --config-register option with the webpack command.

---

Notes:

You don't need to rename the configuration file to webpack.config.babel.js (as suggested in some accepted answers). webpack.config.js works perfectly.