All About Webpack 2

• What’s the alternative when you have typescript, and you require a build pipeline? - rollup, babel, grunt, gulp
• What I like about webpack is that the execution steps of the build are well defined - ordering is explicit. With grunt or gulp, you specify the order of your build which can be daunting when you think about how your application should be built. But grunt, gulp, and webpack can accomplish your application’s bundling needs.

Entry Point - the starting point of your application’s dependency graph

• The bootstrap javascript file of your page or application.
• Multiple entry points are allowed

Resolve - instructions on how to resolve files

resolve.extensions an array value of extensions telling webpack that these extensions can be omitted on import statements
resolve.alias creates alias locations for files

Output - tells webpack how to write the bundled code to disk

• The filename and path where the bundled files are going to be saved
• Only a single Output configuration is allowed

Loaders - transforms html, scss/css, jpg into modules that are part of your application dependency

• Tasks that transforms import statements in your javascript modules.
• Every loader requires a test to match files and a use property to specify the transformation library to use
• Transformations are done on a per-file type basis

Plugins - performs actions on your compilations / chunks. They do anything that loaders don’t

• An example plugin is UglifyjsWebpackPlugin
• More Plugins at https://webpack.js.org/plugins

How to chain webpack loaders:

// webpack.config.js
rules: [{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}, {
  // ...
}]

• The order of execution from chained loaders starts from the bottom up, passing the return value into the next. In this example the transformation works like style-loader(css-loader(sass-loader(‘file’)))
• Without the ExtractTextPlugin to generate the external css files, the compiled css is injected in your html through the