Webpack is an open-source JavaScript module bundler. It is a building tool, which offers two sets of functionalities – Plugins and Loaders. It uses modules with dependencies to generate static assets which will define such modules. Plugins are the main backbone of Webpack. Loaders are changes that we make in the source code. Loaders allow pre-processing the file before opening it. A Plugin can do anything that a loader cannot do, thus
making them great as a pair.
Introduction to Babel
Babel is a JavaScript transpiler which is used to convert new JavaScript codes to old ones. It offers a lot of flexibility while transpiling and if we use it properly, it helps in keeping the code clean and usable while maintaining the same complexity.
Webpack with Babel
Webpack with Babel can be used to array ES6 web application in a finely recorded field of bits of content that are supported in different sources like Git giving instructions on the usage of ES6 for the web pack config file and Stack Overflow. The scope packages were used by Babel from version 7 which was the reason for many developers being in a state of confusion. In order to provide full-time backing or documentation upgrade, many Open Source Packages are appearing to be engaged with their own depository. In this article, we will try to bridge that difference until the other packages upgrade their versions.
Using a tryout web application, this article uses simplified JavaScript in order to draft the browser DOM. It does not give a detailed configuration of Babel plugins or web pack plugins for complicated operations like SPAs. The source of this function can be found at https://github.com/seetd-knowledge/es6-web pack4-babel7.
The application tree has been given below in order to create the same:
├── LICENSE - MIT License file for the repository
├── README.md - File describing the repository
├── package.json - Configuration file for npm package
└── src - Folder that contains all the required file.
├── Controller.js
├── index.js
└── index.template.html
Step 1:
In the above operation, we can see that the root folder runs the command npm install –save-dev web pack web pack-cli. This will help in the installation of the web pack containing cluster function code and web pack-cli which helps in giving access to web pack through command lines. In order to save the packages as a dependency of development on package.json, the option –save-dev was passed which would indicate the requirement of rpm.
Step 2:
The installation of web pack packages is not done into the universal node_module, which needs a simplified modification for package.json which would enable this locally installed web pack-cli to run. The npx package is used here that is accessible only from npm version 5.2.0 onwards. The task npm run a build that performs web pack post accumulating new characteristics “build”: “web pack” to the script’s property in package.json is by npx. For npm version lesser than 5.20, a reference from the footnote should be taken.
Step 3:
In order to work for a web application with a web pack, this step helps in the installation of minimal packages needed for Babel 7. The up gradation of the article will take place whenever possible whenever versions > breaking charges are introduced then those in the article. In the terminal, npm install –save-dev babel-loader @babel/core @babel/preset-env HTML-web pack-plugin script-ext-HTML-web pack-plugin is the first run. As the packages will not be in use in the runtime, hence the below packages are needed to be installed as development dependencies.
1. @babel/core- In order to transpile the latest Javascript version, by syntax transformation to plain vanilla version backed by destined platform, the engine will choose a required configuration for running plugins. The usage of @babel/ implies it is a scope package.
2. @babel/preset-env – This is a Babel preset scope package that compiles down the code to ES5 by determining the Babel plugins automatically and need-based polyfills on the browser targeted or runtime environments. Its default behavior exactly matches with babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, babel-preset-es2017 all together).
3. babel-loader – During the bundling process, this babel plugin would be used to instruct the web pack configuration to run the target files through Babel. It is to be noted that, this does not use scope packages.
4. HTML-web pack-plugin – In order to process or bundle HTML files, this web pack plugin is used. This helps to get HTML files into distribution but is not required by the bare minimum setup.
5. script-ext-HTML-web pack-plugin –This web pack plugin also do not require bare minimal setup but it allows the included distribution of HTML files by automation of injecting the bundled javascript.
Step 4:
Using the installed ES6, the package allows web pack configuration file to write. In the terminal npm install –save-dev @babel/register runs. Since the packages are not used in the runtime, @babel/register as development dependencies would be installed which provides the necessary hook that would bind itself to node’s require and compile files automatically for Babel. To register the package as an execution web pack configuration file module, js-interpret is used internally by the web pack along with a file which has a suffix to work as a .babel.js.
Step 5:
The last step helps in creating web pack.config.babel.js which helps in configuring web pack. It helps in entering the javascript file along with processing it through modules. Plugins are used to ensure HTML is well processed. The prefix web pack.config is used to name a file being a part of the default filename by web pack. The suffix babel.js and js-interpret are also used for identifying configuration files which are needed to be transpired by Babel.
import path from 'path';
import Htmlweb packPlugin from 'html-web pack-plugin';
import ScriptExtHtmlweb packPlugin from 'script-ext-html-web pack-plugin';
export default {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.js/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader'
}]
}]
},
plugins: [
new Htmlweb packPlugin({
title: 'Custom template',
template: path.join(__dirname, 'src/index.template.html')
}),
new ScriptExtHtmlweb packPlugin({
defaultAttribute: 'defer'
})
],
stats: {
colors: true
},
devtool: 'source-map'
};
Step 6:
In this step, a configuration file .babelrc is created for Babel which is the default file name used for defining configuration during transpilation process.
{
"presets": ["@babel/preset-env"]
}
Step 7:
The final directory tree of the project is
. ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── Controller.js │ ├── index.js │ └── index.template.html └── web pack.config.babel.js
In order to generate bundled javascript file and HTML file in the dist folder, the command npm run build is running.
Conclusion:
This article gives a brief idea of setting up web pack using Babel 7 configuring web pack and bundling code using ES6.
The following list shows the versions and dependencies that have been put to test for this article:
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.2",
"html-web pack-plugin": "^3.2.0",
"script-ext-html-web pack-plugin": "^2.0.1",
"web pack": "^4.12.0",
"web pack-cli": "^3.0.3"
}
