Index.html Demo console.log($) alert($.capital('hridayesh')) $. Run $npm run build to generate the bundled code and use it in the next step.

We now need to do a little configuration.

Note that if you have already done this once before, you do not need to do it again.

Webpack is required to build this project, seems it should be a listed dependency (see open question). Strangely, other docs out there suggest we don’t need to have Webpack as a dev dependency, but that seems wrong to me. Hurray! We have finally created our utility library using ES6.🥳 This part is easy - just install WebPack from npm as a global package. Now we install it locally because source-map-loader won’t work if we don’t. In package.json the main property is a direction to the entry point of the module that the package.json is describing. Our 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.Ĭapital.js function capital ( string ) Let's add our source code into src directory: src |-index.js |-capital.js |-addDOMContent.js I am using a -y to initialize it with default options.ĭirectory Structure demo |- src/ |- package.json Step 2: Adding our source code. The above command will create a package.json in your project root. Step 1 : Create a directory demo and run following command in it. For that we will be create two utility functions into two separate files in our source folder. Let's create the source code for our library. Part II will be about setting up the webpack and babel configuration and testing our library.Part I will be about setting up the source code.This blog will be divided into two parts: Package.In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel. If for some reason you want to use a different configuration file depending on certain situations, you can change this via command line by using the -config flag. New to webpack? Check out our guide to some of webpack's core concepts to get started! Use a different configuration file Usually, your projects will need to extend this functionality, for this you can create a file in the root folder and webpack will automatically use it.Īll the available configuration options are specified below.

Also, it generates an example project based on provided webpack configuration that you can review in your browser and download. It allows you to select various features that will be combined and added to the resulting configuration file. tipĬv is an online tool for creating custom webpack configurations. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production. Out of the box, webpack won't require you to use a configuration file.

Do i have to install webpack globally