Webpack Configuration Language Using Babel

Shows how to use ES2015 in your webpack configuration file.

It allows the use of the import statement.

This sample makes use of Node 10.15.3 npm 6.4.1 Webpack 4 and Babel 7 on a Mac.

Pre-Requisites

• NodeJs
• Webpack
• Babel 7

Setup

npm i
npm run build

Tutorial

To setup a webpack configuration file to use ES2015 requires babel:

Install dev dependencies:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

Create a .babelrc file:

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

Create your webpack config, webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

Create your scripts in package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Run npm run build and npm start

Open the developer tools in the browser and view the console to see Hello world

References

• Configuration Languages