Dev

By Carlos Santana on
Reading time: 3 minutes

Webpack-ytfX9.png

Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. Since version 4, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to fit your needs better.

Webpack 4.x does not need a configuration file by default. In older versions, the configuration file was mandatory. If we need to customize Webpack 4.x, we can still use a configuration file, which will be much easier to configure.

Creating our first Webpack project

First, we need to create a new directory and then install some packages:

mkdir my-webpack-project

cd my-webpack-project

npm install webpack webpack-cli

Then inside the directory, we need to run the command:

npm init -y

Now open the file package.json and add a new build script:

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^3.2.1",
    "webpack": "^4.29.0"
  },
  "devDependencies": {},
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
File: package.json

Open your terminal and run the command:

npm run build

You will get this error: 

BuildError-uV83X.png

This error is caused because of Webpack 4 by default look for the main entry at src/index.js. Let's create this file to be able to build our first bundle.

console.log('Hello world...');
File: src/index.js

If you run again the build script, now Webpack will create a new bundle file called main.js into the dist directory (this is the default behavior of Webpack).

MainBundle-CazXJ.png

If you see there is a warning in the terminal that says: the mode option has not been set, Webpack will fallback to production for this value. Set mode to development or production to enable defaults for each environment. You can also set it to none to disable any default behavior. By default, the production mode is enabled, and that's why our bundle (dist/main.js) is minified and obfuscated, similar to this: 

CompressedCode-v3nrs.png

File: dist/main.js

As you can see our console.log("Hello world...") is at the end of that code.

Webpack 4.x has two modes: production and development. In older versions, you needed to create a configuration file for each one; now you can get the same result with a single line. You need to add a new script to get the application to start using the development mode:

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^3.2.1",
    "webpack": "^4.29.0"
  },
  "devDependencies": {},
  "scripts": {
    "build": "webpack --mode production",
    "build:development": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
File: package.json

Now if you run the script in your terminal npm run build:development, now you will see the uncompressed bundle:

UncompressedCode-T51eO.png

File: dist/main.js

As you can see, by default, Webpack 4 uses the production mode and minifies the code and performs some optimizations, in Webpack 3, this configuration needs to be done manually in the configuration file.

Implementing Babel with Webpack

Babel is a JavaScript compiler to convert ES6 code to ES5 (native) JavaScript code. In Webpack we can implement Babel by using the babel-loader, that means you need to install these packages:

npm install babel-loader @babel/core @babel/preset-env

After you install those packages you need to create a .babelrc file at the root of your project and then add this code: 

{
  "presets": ["@babel/preset-env"]
}
File: .babelrc

Now we need to create our webpack.config.js file and add our babel-loader:

const webpackConfig = { 
  module: {
    rules: [ 
      {
        test: /.js$/,
        exclude: /node_modules/, 
        use: 'babel-loader'
      } 
    ]
  } 
};

module.exports = webpackConfig;
File: webpack.config.js

Let's create a file called src/numbers.js and import it to the src/index.js to test the babel-loader.

export const numbers = ['one', 'two', 'three'];
File: src/numbers.js

In the index.js file, we need to import it:

Only members can see all the codes
You can Login or Sign Up

File: src/index.js

If you want to test it just run again the command npm run build script. 

BuildOk-4LfK8.png

In the next posts, I'll talk about how to add React to Webpack 4. If you liked this post and you want to learn more about Webpack and React you can get my React Cookbook.

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up