What is Webpack?

Review of the popular module bundler with similar products comparison and installation instructions
18 July 2017   2472
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

Third Party Apps Could Read Twitter Messaging

According to the company, no one used this vulnerability and the issues is now solved
18 December 2018   614

Until the beginning of December, third-party applications could access Twitter private messages. According to the company, no one took advantage of this vulnerability. Terence Eden, who found it, was paid almost $ 3,000 under the Bug Bounty program.

In 2013, there was a leak of keys to the Twitter API - so applications could access the interface bypassing the social network. To protect users, Twitter implemented an application authorization mechanism through predefined addresses (Callback URL), but it didn’t suit everyone.

Applications that do not support Callback URLs could authenticate using PIN codes. With this authorization, a window pops up that lists which data the user opens to access. The window did not request access to private messages, but in fact the application received it.

On December 6, Twitter reported that it had solved the problem. Judging by the statement of the company on the HackerOne website, no one had time to take advantage of this vulnerability.

This is not the first social network security error related to the API. In September, Twitter discovered a bug in AAAPI (Account Activity API): the system sent a copy of the user's personal message to a random recipient.