# Using Webpack 4 to transform and package web application resources

Español | English

Webpack (opens new window) is one of the most widely used JavaScript technologies for years to transform and package all kinds of web resources, such as JavaScript, HTML, CSS or images.

Its system is based on the chained execution of loaders (opens new window) and plugins (opens new window) that transform and package our files and their dependencies, resulting in new static resources (known as bundles) that we will use in our application.

With Webpack we can for example convert ES2015+ to ES5, TypeScript, CoffeeScript, Elm to JavaScript, import images, CSS, JSON or XML styles directly into our JavaScript file, transform our Markdown, Pug, Jade, Twig templates to HTML, convert SCSS, SASS, Stylus, LESS, PostCSS files to CSS and much more.

Starting for example from JavaScript files:

// index.js
const user = require('./user');
console.log(`Hi ${user.getName()}!`);

// user.js
const getName = () => {
  return 'Rafael';
};

exports.getName = getName;

Webpack would take as input file our index.js, parse its dependencies (user.js) and generate a new single resource main.js with all the necessary code.

# Installing Webpack globally

In order to install Webpack it is necessary to have previously installed Node.js (opens new window).

Installing it globally allows us to access it from anywhere on the terminal.

npm install webpack webpack-cli -g

This way we will have installed the package, as well as the necessary commands to be able to perform the Webpack operations.

# Installing Webpack locally

If we have not done it yet, we must start npm in the folder of our project to be able to save the dependencies that are installed.

npm init

We will indicate what is necessary in the questions that the system will ask us or we will press enter to leave the pre-determined values in the new package.json file that will be created.

Then we can install Webpack as a dependency package for development (using the --save-dev or -D option), since it is a package that we will only use during the creation (build) of our application.

npm i --save-dev webpack webpack-cli

# Configuring and packaging with Webpack

It is possible to use Webpack from the command line with all the options we need to be able to transform and package our resources, but in practice, it is best to generate a configuration file webpack.config.js in the root directory of our project.

For our previous example of two JavaScript files index.js and user.js, it would be enough to generate the following content in the configuration file.

// webpack.config.js
module.exports = {
  entry: './index.js'
};

We would also take the opportunity to add a new script to the package.json file to simplify Webpack execution.

{
  ...
  "scripts": {
    ...,
    "build": "webpack"
  },
  ...
}

Now, when we run the npm run build command in our directory, it will package our files by default in ./build/main.js.

You can check all the code of the previous example in GitHub (opens new window).

Installing Webpack globally
Installing Webpack locally
Configuring and packaging with Webpack