Clash Royale CLAN TAG#URR8PPP

How can I use ES6 in webpack.config.js?

How to use ES6 in webpack.config ?
Like this repo
https://github.com/kriasoft/react-starter-kit
does ?

For instance:

using this

import webpack from 'webpack';


instead of

var webpack = require('webpack');


It is quite a curiosity rather than a need.

12 Answers
12

Try naming your config as webpack.config.babel.js. You should have babel-register included in the project. Example at react-router-bootstrap.

webpack.config.babel.js

Webpack relies on interpret internally to make this work.

npm run

webpack --config webpack.config.babel.js

--config

babel-loader

echo ' "presets": ["es2015"] ' > .babelrc

As an alternative to what @bebraw suggests, you can create a JavaScript automation script with ES6+ syntax:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);


And execute it with babel:

$ babel-node tools/bundle


P.S.: Calling webpack via JavaScript API might be a better approach (than by calling it via a command line) when you need to implement more complex build steps. E.g. after server-side bundle is ready, startup Node.js app server, and right after Node.js server is started, launch BrowserSync dev server.

package.json/scripts

tools/bundle.js

tools/webpack.config.js

run.js

webpack.config.js

node run

Another approach is to have a npm script like this: "webpack": "babel-node ./node_modules/webpack/bin/webpack", and run it like so: npm run webpack.

"webpack": "babel-node ./node_modules/webpack/bin/webpack"

npm run webpack

I had a problem getting @Juho's solution running with Webpack 2. The Webpack migration docs suggest you to turn of babel module parsing:

It is important to note that you will want to tell Babel to not parse
these module symbols so webpack can use them. You can do this by
setting the following in your .babelrc or babel-loader options.

.babelrc:


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



Sadly, this conflicts with the automatic babel register functionality. Removing

"modules": false


from the babel config got things running again. However, this would result in breaking tree-shaking, so a complete solution would involve overwriting the presets in the loader options:

module:
rules: [

test: /.js$/,
include: path.resolve('src'),
loader: 'babel-loader',
options:
babelrc: false,
presets: [['env', modules: false]]


]



Edit, 13th Nov 2017; updated webpack config snippet to Webpack 3 (thanks to @x-yuri). Old, Webpack 2 snippet:


test: /.js$/,
exclude: ['node_modules'],
loader: 'babel',
query:
babelrc: false,
presets: [
['es2015', modules: false ],
],
,
,


module:rules: [test: /.js$/, include: path.resolve('src'), loader: 'babel-loader', options: babelrc: false, presets: [['env', modules: false]]]

-loader

exclude

include

query

options

modules: false

.babelrc

import

webpack.config.babel.js

-loader

This is really easy, but it wasn't obvious to me from any of the answers, so if anyone else is confused like me:

Just append .babel to the part of your filename before the extension (assuming that you have babel-register installed as a dependency).

.babel

babel-register

Example:

mv webpack.config.js webpack.config.babel.js


require

One more way is to use require argument for node:

node -r babel-register ./node_modules/webpack/bin/webpack

node -r babel-register ./node_modules/webpack/bin/webpack

Found this way in electron-react-boilerplate, look at build-main and build-renderer scripts.

build-main

build-renderer

Rename webpack.config.js to webpack.config.babel.js.

webpack.config.js

webpack.config.babel.js

Then in .babelrc: "presets": ["es2015"]

"presets": ["es2015"]

However, if you want to use a different babel config for babel-cli, your .babelrc might look something like this:


"env":
"babel-cli":
"presets": [["es2015", "modules": false]]
,
"production":
"presets": ["es2015"]
,
"development":
"presets": ["es2015"]





And in package.json:


"scripts":
"babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
"build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
...
,
...



It's dumb but the "modules": false will break webpack if you don't use different envs.

"modules": false

For more info about .babelrc, check the official docs.

This is what worked for me using webpack 4.

In package.json:

package.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 no surprises there.

Note I am using webpack-serve--require, but if you want to use the webpack command instead, replace it with webpack --config-register. In either case, @babel/register is needed to make this work.

webpack-serve

webpack

webpack --config-register

@babel/register

And that's it!

yarn dev

yarn dev

And you are able to use es6 in the config!

es6

NO need to rename the config file to webpack.config.babel.js (as suggested by the accepted answer). webpack.config.js will work just fine.

webpack.config.babel.js

webpack.config.js

My Best approach along with npm script is

node -r babel-register ./node_modules/webpack/bin/webpack


and configure rest of scripts as per your requirement for Babel

Don't have enough rep to comment, but I wanted to add for any TypeScript users out there a similar solution to @Sandrik above

I have two scripts that I use pointing to webpack configs (JS files) that contain ES6 syntax.

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

and

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

After tons of the documents...

Just install es2015 preset (not env !!!) and add it to

.babelrc:

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



Rename your webpack.config.js to webpack.config.babel.js

webpack.config.js

webpack.config.babel.js

Configuration for Babel 7 & Webpack 4

package.json

...
"scripts":
"start": "webpack-dev-server --env.dev",
"build": "webpack --env.prod",
,
"keywords": ,
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.0",
...
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^3.1.8"


.babelrc


"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]



webpack.config.babel.js

import webpack from 'webpack';
import resolve from 'path';

import getIfUtils, removeEmpty from 'webpack-config-utils';

export default env => {
const ifProd, ifNotProd = getIfUtils(env);

return {
mode: ifProd('production', 'development'),
devtool: ifNotProd('cheap-module-source-map'),
output:
path: resolve(__dirname, ifProd('prod', 'dev')),
filename: 'bundle.js'
,


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.