In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel.
\nLet's create the source code for our library. For that we will be create two utility functions into two separate files in our source folder.
\ndemo and run following command in it. $ npm init -yThe above command will create a package.json in your project root. I am using a --y to initialize it with default options.
Directory Structure
\ndemo\n |-- src/\n |-- package.jsonLet's add our source code into src directory:
src\n |--index.js\n |--capital.js\n |--addDOMContent.jsOur utility library contains two functions capital, to capitalize a string and addDOMContent, to add content to a web page, each in it's own module.
capital.js
function capital(string) {\n const capitalizedString =\n string.substring(0, 1).toUpperCase() + string.substring(1)\n return capitalizedString\n}\n\nexport default capitaladdDOMContent.js
function addDOMContent(content) {\n const node = document.createElement("h1")\n node.innerText = content\n document.body.appendChild(node)\n}\n\nexport default addDOMContentInside our index.js, we will import these two functions.
index.js
import capital from "./capital"\nimport addDOMContent from "./addDOMContent"\n\nexport { capital, addDOMContent }So far we got the source code ready but we still need to bundle it so that the browsers can understand and oh boy!, we need to support some older browsers too 🙄. Anyway, being responsible developers we are going to do that 😎.
\n $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loaderWe need webpack to bundle our code and webpack-cli is a command-line tool that uses webpack to do the same. Also webpack requires babel-loader to transpile our ES6 code to ES5 before bundling (Remember, what I said about being responsible developers 😃).
4.1. Create a webpack.config.js at the root of the project.
webpack.config.js
const path = require("path")\n\nmodule.exports = {\n entry: path.resolve(__dirname, "src/index.js"),\n output: {\n path: path.resolve(__dirname, "dist"),\n filename: "index_bundle.js",\n library: "$",\n libraryTarget: "umd",\n },\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: "babel-loader",\n },\n ],\n },\n mode: "development",\n}There are a couple of things we need to understand about webpack configuration. Stay with me for a couple more minutes.
\nentry: In order for webpack to know where to start with, it needs to know the entry point to our app.module.rules: Each file in Node is treated like a module. Webpack itself understands only Javascript and JSON modules. Since we want to transpile ES6, we need babel-loader and webpack needs to know the rules on how to process the Javascript using the given loader.output: After creating the bundle, webpack needs to know what name to give it and where to put it.library and libraryTarget are used to expose our library where library being the name,$ here and libraryTarget is the property to configure, how the library will be exposed. Here we will be using UMD. UMD is a module system capable of working everywhere, be it in the client, on the server or elsewhere.mode: Webpack bundles code into either development mode (unminified) or in production(minified) mode. I am using a hard coded value here for the demo. You can set it using environment variables too.
\n4.2. Create a .babelrc file at the root of the project.
.babelrc
{\n presets: ["@babel/preset-env"]\n}@babel/preset-env let's us use the latest Javascript without any polyfills and syntax transforms.babel-loader uses babel under the hood.
By Now our Project Structure should look like this:
\ndemo\n|-- src\n| |-- index.js\n| |-- capital.js\n| |-- addDOMContent.js\n|-- webpack.config.js\n|-- .babelrc\n|-- package.json\n|-- node_modulesWe have added our source files, now let's add an npm script to build final code using webpack and modify the main property inside our package.json to point it to our bundled code.
package.json
{\n "name": "demo",\n "version": "1.0.0",\n "description": "",\n+ "main": "dist/index_bundle.js",\n+ "scripts": {\n+ "build": "webpack"\n+ },\n "keywords": [],\n "author": "Hridayesh Sharma",\n "license": "ISC",\n "dependencies": {},\n "devDependencies": {\n "@babel/core": "^7.10.4",\n "@babel/preset-env": "^7.11.0",\n "babel-loader": "^8.1.0",\n "webpack": "^4.44.1",\n "webpack-cli": "^3.3.12",\n }\n}In package.json the main property is a direction to the entry point of the module that the package.json is describing.
Run $npm run build to generate the bundled code and use it in the next step.
index.html
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Demo</title>\n </head>\n <body>\n <script src="dist/index_bundle.js"></script>\n <script>\n console.log($)\n alert($.capital("hridayesh"))\n $.addDOMContent("Well It Works Fine!!!")\n </script>\n </body>\n</html>Save it and run it in your browser. You will see the name capitalized.
\nThe complete code is available at LoginRadius Engineering Blog Sample Repo
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"August 18, 2020","updated_date":null,"title":"Let's Write a JavaScript Library in ES6 using Webpack and Babel","tags":["JavaScript","Webpack","NodeJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4a7d7b651d2d5406780c786320c2b664/ee604/cover.png","srcSet":"/static/4a7d7b651d2d5406780c786320c2b664/69585/cover.png 200w,\n/static/4a7d7b651d2d5406780c786320c2b664/497c6/cover.png 400w,\n/static/4a7d7b651d2d5406780c786320c2b664/ee604/cover.png 800w,\n/static/4a7d7b651d2d5406780c786320c2b664/a8378/cover.png 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}}]}},"pageContext":{"tag":"Webpack"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}