What is Webpack?

Review of the popular module bundler with similar products comparison and installation instructions
18 July 2017   1941
JavaScript

Lightweight interpreted or JIT-compiled programming language with first-class functions

A good practice in modern web development is the use of tools that will help simplify and accelerate the development process, as well as prepare project files for the combat server.

For these purposes, you can use such auto-task systems as like Grunt or Gulp, creating a chain of such transformations that, for example, minimize your CSS or JavaScript code, join to a single file, etc.

Such tools are extremely popular and very useful. There is, nevertheless, another way to produce similar actions that are implemented using Webpack.

What is Webpack?

Webpack can be described as a "module builder". It takes JavaScript modules with the necessary dependencies, and then joins them together in the most efficient way possible by creating a single JS file. At first glance, nothing special, is it? For example, tools like RequreJS allow you to do these things for many years.

What is Webpack?
What is Webpack?

The whole trick is this. Webpack is not limited to using only JavaScript modules. Using special Boot Loaders, Webpack understands that JavaScript modules may be required for their work, for example, CSS files, and they, will require images. In this case, the result of the Webpack work will contain only those resources that are really needed for the operation of the application.

Webpack philosophy

Webpack has 2 main principles:

  1. Anything can be a module. Modules can be either JS-files, or CSS-files, HTML-files or images. That is, you can use both require ("myJSfile.js"), and require ("myCSSfile.css"). Thus, you can break anything into smaller, more manageable parts, reuse them, and so on.
  2. Download only what you need and when you need it. Typically, module builders take all modules and generate one large bundle.js file from them. But in many applications the size of such a file can reach 10-15 MB - and that's too much. Because Webpack is equipped with a number of functions that allow you to divide the code and generate a lot of bundle-files, and also asynchronously load the necessary parts of the application when necessary.

Webpack vs Brunch, Gulp\Grunt 

Brunch is "ultra fast" (as developers assure) HTLM5 built tool. Let's take a look, what are the differences and commons between Brunch and Webpack.

Similar:

  • first-class module-support
  • Hot Module Replacement
  • have a notion of "compiler" / "loader" (although loaders are more than that)
  • can require stylesheets

Differences:

  • Webpack can:
    • asynchronous module loading / code splitting — brunch does have entry points functionality and can produce several js bundles though
    • have clever processing of non-js/non-css assets
  • Brunch can:
    • does not make you specify how to compile a file, every time you use it. Just add a compiler plugin and everything will Just Work™
    • achieves faster build times

Gulp/Grunt vs Webpack

There are two main differences:

1. Gulp/Grunt is a task runner
Task runner is an app that allows for automating repeatable activities. The tasks are defined in a JS file and executed with a command containing the name of the task. You can, for example:

  • run tests and merge files
  • compile Saas
  • minify CSS/HTML
  • bundle/uglify JS

2. Webpack is NOT a task runner
In opposition to Gulp, Webpack is a module bundler. Generating static assets from the application modules and dependencies is its main purpose.

Does it mean you need to use Gulp/Grunt to handle your tasks? Not at all.

The only thing you need to do is define your tasks in the scripts section of your package.json file:

{

"scripts": {

 "build": "node build.js"

}

}

NPM or Yarn can be used as a task runner:

$ yarn run build

Conclusion

Webpack is a bundler with a lot of features. It has a feature to analyze JS-code (and also CSS or another, through loaders), it gives it superpowers.

Gulp/grunt is a common system for task organization, which doesn't support the assembly, by default, only with plugins. At the same time, they don't support code analyze, which means that a number of advanced features will disappear.

these are two different things. 

Webpack releases and installation

Lettest Webpack version is 3.3.0. can be found on the github.

Version v1.0.0-beta2  (the oldest available on the Github) was released on 20 Dec 2013.

Version v2.0.1-beta was released on  24 Nov 2015.

Installation

Before the beginning, make sure you have a fresh version of Node.js installed. 

Local Installation

To install the latest release or a specific version, run one of the following commands:

npm install --save-dev webpack
npm install --save-dev webpack@<version>

Installing locally is recommended by the developers for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more npm scripts which will look for a webpack installation in your local node_modules directory:

"scripts": {
    "start": "webpack --config webpack.config.js"
}

Global Installation

The following NPM installation will make webpack available globally:

npm install --global webpack

Additional tools

Now, let's check for some little. but helpful webpack related tools, that will make your coder life easier. 

Webpack file size

Webpack Bundle Size Analyzer is a small tool, that will help you  you find out what is contributing to the size of your bundles. Available on GitHub.

This is the result of this tool:

Webpack Bundle Size Analyzer
Webpack Bundle Size Analyzer

Webpack yml

Another little, but a useful tool. Converts YAML to a valid JSON. 

webpack yml
Webpack yml

Available on GitHub.

Size Limit

Not exactly a webpack tool, but a related one. It allows users to know exactly for how many kilobytes their JS library increases the user bundle. Read more in related article.

Sum Up

Webpack is a great tool for modules bundling with great range of features. However, it has it's own restrictions, and every developer or team shouldn't use just one tool in developing process. 

What tool do you use?

Webpack is a bundler with a lot of features. .Gulp/grunt is a common system for task organization, which doesn’t support the assembly, by default, only with plugins. At the same time, they don’t support code analyze, which means that a number of advanced features will disappear. Which of these tools do you use most often in your development process? 

Gulp\Grunt
100% (1 vote)
Webpack
0% (0 votes)
Brunch
0% (0 votes)
Total votes: 1

AngularJS to Angular Migration Tools to be Released

New tools are called ngMigration Assistant and ngMigration Forum
17 August 2018   222

The JS-development team AngularJS has released two customers' "helper" - ngMigration Assistant and Forum. The tools show which migration from AngularJS to Angular is correct, how to simplify the process as much as possible and avoid mistakes.

ngMigration Assistant is a command-line tool that analyzes any AngularJS application, regardless of size, and recommends an optimal migration path. It provides statistics on the complexity, size, and patterns of an app. Based on this data, the program offers a list of clear recommendations that simplify the transition from AngularJS to Angular, taking into account the size and complexity of the code.

You can find an example of using the ngMigration Assistant for the AngularJS phone catalog application below. Using the ngma command, registered in the directory, analysis is performed and recommendations are written.

Displaying ngMigration Assitant statistics
Displaying ngMigration Assitant statistics

Initially, the tool shows statistics of the available data, and after - the stages of preparation for migration to Angular.

NgMigration Assitant Recommendations
NgMigration Assitant Recommendations

The new ngMigration Forum collects up-to-date information on migration paths and tools that provide the transition from AngularJS to Angular. ngMigration Forum is a place for sharing experiences, solving problems and asking questions.

The last update of Angular 6.1 was released in late July 2018. In Angular, support for TypeScript 2.8 and 2.9 was added, as well as the ability to configure the router to store and restore the scrolling position