First steps to fly with Webpack

Webpack is a module bundler for modern JavaScript applications, easy to configure and very friendly. In this article, I wrote about some concepts that I consider you have to know before to getting start. So, let’s go!

Let’s think one second

As I said, webpack is a “bundler”. The bundlers take assets and transform them into a format that’s suitable for the user’s browser to consume. This process of bundling turns to be one of the most important problems in web development and solving it well we can remove a large part of pain from the process.

Usually, the people compare webpack with tools like Grunt, or Gulp. But, those tools are Task Runners. Literally, task runners make easier to handle tasks, such as linting, building, or developing your project. Compared to bundlers they have a higher level focus and much more specific goal.

Concepts

Before getting start with webpack you should understand Four Concepts:

1. Entry

Entry tells webpack which files are the entry points of your app. We define that in webpack.config.js.

module.exports = {  
  entry: './path/to/my/entry/file.js'
};

2. Output

This property contains set of options for webpack about how and where it should output your bundles, assets and everything related to webpack.

In webpack.config.js

var path = require('path');
module.exports = {  
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

3. Loaders

The goal is to have all assets in your project, that’s way the concern will be of webpack and not the browser.(This doesn’t mean that they all have to be bundled together).
Webpack interpret every file (.css, .html, .scss, .jpg, etc.) as a module. However, only understands JavaScript. Loaders in webpack transform these files into modules as they are added to your dependency graph.
At a high level, they have two purposes in your webpack config.

• Identify what files should be transformed by a certain loader (test property).
• Transform that file so that it can be added to your dependency graph — and eventually your bundle -. (use property)

Again into webpack.config.js:

var path = require('path');
const config = {  
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
module.exports = config;

4. Plugins

Webpack itself is built on the same plugin system that you use in your configuration. Then, plugins are the backbone of webpack.

And they also serve the purpose of doing anything else that a loader can’t do.

And finally webpack.config.js.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm  
const webpack = require('webpack'); //to access built-in plugins  
const path = require('path');
const config = {  
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

Read more here

Conclusion

In my experience, these concepts are enough to getting start with webpack. Now, we know the main difference between task runners and bundlers and the four core concepts in webpack (entry, output, Loaders and plugins).
Now, you are ready to learn Webpack.

If you have any questions or doubts please leave a comment or contact us!

For know more about us and the company please take a tour in our brochure!

Good Luck and be patient!

Sources: Webpack official, Madewithlove and my experience.