My first bundle with Webpack 4

Webpack is a open-source bundler for web assets like CSS or JavaScript files

To install Webpack you will need NPM to be installed on your computer or any similar package manager like Yarn.

Open a command line and go to the root directory of your project, then run

C:\>xampp\htdocs\webpack-project>npm install webpack –save-dev

 

Proceed to install CLI

C;\>xampp\htdocs\webpack-project>npm install –save-dev webpack-cli

 

Now create a package.json file in the root of your project directory with the following contents

package.json

Create also a webpack.config.js file in the root of your project directory with the following contents

webpack.config.js

Create a new folder named assets and a new folder named js in the assets folder with the following Javascript file

index.js

Create a HTML File which we will use later to see if everything works fine

Open a command line and go to the root directory of your project, then run:

C:\>xampp\htdocs\webpack-project>npm run build

 

Run also:

C:\>xampp\htdocs\webpack-project>npm run watch

 

for Webpack to create a new bundle everytime changes are made to the JavaScript file

Finnaly click the Click me button and an alert box should be displayed if everything is working fine