Setting up webpack

Install webpack CLI:

npm install webpack -g

Create your project and initialize npm:

mkdir webpack-demo && cd webpack-demo

Set up lib/main.js:

var a = 42;
console.log(`test ${a}`);

(At this point, you can compile it directly with webpack-cli)

webpack lib/main.js bundle.js

To enable full ES6-support (such as modules), install babel:

npm install babel-loader babel-core babel-preset-es2015

Set up webpack.config.js:

module.exports = {
  entry: './lib/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};

Set up index.html:

<!doctype html>
  <script src="bundle.js"></script>

Compile it:

webpack

Setting up multiple entries

Change entry and output in webpack.config.js:

entry: {
  name: 'path-to-source'
},
output: {
  path: 'output-directory',
  filename: '[name].js'
}

Adding more loaders

Add the loader you need, e.g. the style-loader and css-loader (for loading CSS-files):

npm install json-loader css-loader

Extend the modules-property in webpack.config.js:

module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

Adding source-map

Add the following snippet to webpack.config.js:

devtool: "source-map"

Resources

Back to presentation