Webpack

• Module bundler
• Takes modules with dependencies and generates static assets representing those modules

Webpack

Webpack

Webpack

• Code splitting
  • sync and async loading of dependencies
• Loaders
  • transforming resources, not only JS
• Pre-/post processing
• Live reload
• Plugin system
  • rich plugin system for customization
  • Can I xyz? Yes, most probably.

Webpack

• Basic config

module.exports = {
  entry: './about',
  output: {
    filename: 'build.js'
  }
};

https://github.com/nordnet/webpack-101/tree/01-basic-config

Webpack

• External access to modules

module.exports = {
  entry: './about',
  output: {
    filename: 'build.js',
    library: 'app'
  }
};

https://github.com/nordnet/webpack-101/tree/02-external-access-to-modules

Webpack

• Watching for changes and source maps

module.exports = {
  entry: './about',
  output: {
    filename: 'build.js',
    library: 'app'
  },

  watchOptions: {
    aggregateTimeout: 100
  },

  devtool: 'inline-cheap-module-source-map'
};

https://github.com/nordnet/webpack-101/tree/03-watch-and-source-maps

Webpack

• Environment variables

var webpack = require('webpack');
var NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {

  ...

  devtool: NODE_ENV === 'development' ? 'inline-cheap-module-source-map' : null,

  plugins: [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(NODE_ENV)
    })
  ]
};

https://github.com/nordnet/webpack-101/tree/04-environment-variables

Webpack

• Loaders
• Resolving loaders

module.exports = {

  ...

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }],
  },

  ...

};

https://github.com/nordnet/webpack-101/tree/05-loaders

Webpack

• Plugins

module.exports = {

  ...

  plugins: [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(NODE_ENV)
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
        unsafe: true,
      }
    }),
    new webpack.NoErrorsPlugin(),
  ]

  ...

};

https://github.com/nordnet/webpack-101/tree/06-plugins

Webpack

• Multiple entry points

module.exports = {
  context: __dirname + '/src',

  entry: {
    about: './about',
    profile: './profile'
  },

  output: {
    path: __dirname + '/public',
    publicPath: '/public/',
    filename: '[name].js',
    library: '[name]'
  },

  ...
};

https://github.com/nordnet/webpack-101/tree/07-multiple-entry-points

Webpack

• Common chunks
• Profiling

module.exports = {

  ...

  plugins: [

      new webpack.optimize.CommonsChunkPlugin({
        name: 'common'
      }),

  ],

  ...

};

https://github.com/nordnet/webpack-101/tree/08-common-chunks​