Webpack and its future in 6 questions

Hello everyone, today we are going to discover Webpack in just 6 questions.
Webpack is a "bundler module", its goal is simple: to transform your application into static files.

How does it work?

Webpack interprets each part of your application as a module; whether it is a JavaScript module, a style sheet or an image.
Starting from the entry point of your application, Webpack will generate a dependency tree. The modules loaded in memory will allow it to generate a static distribution of your application.
The files thus generated can be used directly in the browser.

// building dependencies starts from this file 
entry: './src/index.js', output: {
  // the generated bundle will contain the entire application 
  path: path. resolve(__dirname, 'dist'), filename: 'app.bundle.js'
}

Is Webpack different from Grunt and Gulp?

Gulp and Grunt are task runners, their purpose is to allow you to orchestrate predefined tasks. They require the use of different libraries in order to make it a build tool. For example, you'll need to add Uglify to minify your app, through a task as code. The Webpack approach will favor a more static approach, reading a configuration file allows you to get an overall idea of ​​the processing performed...
Webpack Evolution

Does it work if I use Typescript? ES6/ES7? JSX?

Thanks to its loader system, Webpack can understand any type of file, just install and configure the right loader. Each added loader allows Webpack to understand a new type of module. There are loaders for any type of module: Typescript, Babel, LESS/SASS, HTML, images…

module: { rules: [
    // Load all modules with the extension '.ts' or '.tsx' with the 'ts-loader'
    {test: /\.tsx?$/,loader:'ts-loader'} ] }

TypeScript loader
babel loader
In addition, the plugin system will make it possible to enrich the functionalities offered by the loaders by adding advanced behaviors to your configuration.

plugins: [
  // Enable application loading optimization by splitting the bundle
 new webpack.optimize.CommonsChunkPlugins(options) ]

How do I use it daily?

Enable Watch Mode or install the Webpack Dev Server to watch your files change and trigger the incremental build of Webpack. Only modified modules will be re-compiled, so the build will be super fast.
You can also configure the Hot Module Reload which will only update the modified modules in the browser.
For example, if you change a color in a CSS module, the elements will update without reloading the page. Magic !
Webpack DevServer

What does it look like in production?

To deploy your application in production, you must split your configuration in order to externalize the configurations by environment (ex: prod.webpack.config.js). This separation facilitates the activation of functionalities intended for a targeted environment (ex: source maps).
Before deploying your bundle, you can take advantage of advanced features.
The Tree Shaking which allows the removal of dead code or the Code Splitting which will generate your bundle in several parts, some of which are asynchronous.
 

What are the upcoming features?

Version 4 of Webpack currently in Beta is coming soon with a lot of improvements. On the menu: performance optimizations, WASM support, JSON support, introduction of standard modules...
Webpack 4 will be the first version #0CJS (Zero Configuration), like Parcel an out-of-the-box bundler module.
This new approach will simplify the deployment by reducing the verbosity of the configuration files.
Webpack 4 Beta
Webpack 4 Tutorial
 

That's it, you're ready to use Webpack to bundle your applications!

 
About Emanuel Ernest