Webpack

• Module loading
  • CommonJS
  • AMD
  • UMD (CommonJS + AMD)
• Code splitting
• Lazy loading
• Package (almost) any resource as JavaScript

Load any resource as JavaScript

// HTML
import $header from './header.html';

document.body.insertAdjacentHTML('beforeend', $header);

// CSS
import './styles.css';

// Images
import image from './image.png';

const img = document.createElement('img');
img.src = image;

var path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: 'build'
  }
};

Basic configuration

var path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: 'build'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel' }
    ]
  }
};

Loaders

var path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: 'build'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel' }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

Plugins

https://github.com/jlowgren/webpack-lab