Experimenting with Babel 7 in Webpack

I’ve been using Webpack for quite a while for my JavaScript tooling. For ES6 JavaScript codes to work in the browsers they need to be “translated” to ES5. This is because different browser versions have different supports for ES6. Therefore, if we want our ES6 codes to work on browser versions we target we need to compile then into ES5. Babel is a package for translating ES6 to ES5.

Babel 7 have new capability in specifying the browsers we want to target by using @babel/preset-envpackage. An example configurations when we target specific browsers are like this:

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      }
    },
  ],
];

module.exports = { presets };

The configuration will target the browsers listed when compiling the ES5 scripts. We can get away with only using the @babel/env but this won’t take advantage of the browser targeting capability. I’m still not clear what this advantage entail off. I know that different browsers have different supports on ES6 (https://caniuse.com/#feat=es6), so I’m guessing when translating on a specific target Babel will choose which code to translate based on the browser’s capability. I’m wondering if this is true, wouldn’t translating all the code would be better for wide range of support? maybe I’ll dig into it later.

I still haven’t gotten deep enough on other configurations in Babel. But I think this basic configuration in Webpack can get me going. My dependency list in package.json:

  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }

And my Webpack configuration:

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	mode: 'development',
	entry: './src/js/index.js',
	output: {
		filename: 'bundle.min.js',
		path: path.resolve(__dirname, 'dist')
	},
	devtool: 'cheap-eval-source-map',

	devServer: {
		contentBase: path.join(__dirname, 'dist'),
		watchContentBase: true,
		compress: true,
		port: 9000
	},

	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				loader: 'babel-loader',
				query: {
					presets: [
						[
						  "@babel/env"
						],
					  ]
				}
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: 'html-loader',
						options: { minimize: true }
					}
				]
			}
		]
	},
	plugins: [
		new UglifyJSPlugin(),
		new HtmlWebpackPlugin({ template: './src/index.html' })
	]
};

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.