This is a very basic "getting started with Webpack" guide for use with Webpack v3. This doesn't cover all features, but it should get you started in understanding the config file format.

Basic config

webpack.config.js

module.exports = {
  context: __dirname,
  entry: 'src/app.js',
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  }
}

Terminal

npm install --save-dev webpack
webpack build
webpack -- -p build production
webpack -- --watch compile continuously

This compiles src/app.js into public/app.js. (Note: you may need to use ./node_modules/.bin/webpack as a command if you’re not invoking Webpack via npm scripts.)

Multiple files

webpack.config.js

module.exports = {
  entry: {
    app: 'src/app.js',
    vendor: 'src/vendor.js'
  },
  output: {
    path: __dirname + '/public',
    filename: '[name].js'
  }
}

This creates app.js and vendor.js.

Loaders

Babel

Terminal

npm install --save-dev \
  babel-loader \
  babel-preset-env \
  babel-preset-react

webpack.config.js

module.exports = {
  ···
  module: {
    rules: [
      { test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' }
        ]
      }
    ]
  }
}

.babelrc

{
  "presets": [ "env", "react" ]
}

Adds support for Babel.

CSS

Terminal

npm install --save-dev \
  css-loader \
  style-loader

webpack.config.js

module.exports = {
  ···
  module: {
    rules: [
     { test: /\.css$/,
       exclude: /node_modules/,
       use: [
         { loader: 'style-loader' },
         { loader: 'css-loader' }
       ]
      }
    ]
  }
}

Your JavaScript

import './styles.css'
// or:
require('./styles.css')

This allows you to use CSS inside your JavaScript. This packages your CSS inside your JavaScript bundle.

PostCSS

Terminal

npm install --save-dev \
  postcss-loader \
  postcss-cssnext

webpack.config.js

···
// Inside module.rules[]:
{ test: /\.css$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'postcss-loader' }
···

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-cssnext')()
  ]
}

This example adds postcss-cssnext support to your CSS files.

Other features

Dev server

package.json

{ ···
  "scripts": {
    "dev": "webpack-dev-server"
  }
}

Terminal

npm install --save-dev \
  webpack-dev-server
npm run dev

This starts an HTTP server for development (port 8080 by default).

0 Comments for this cheatsheet. Write yours!