Webpack

JavaScript libraries

Basic config

webpack.config.js

1
2
3
4
5
6
7
8
module.exports = {
  context: __dirname,
  entry: 'src/app.js',
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  }
}

Terminal

1
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

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
npm install --save-dev \
  babel-loader \
  babel-preset-env \
  babel-preset-react

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  ···
  module: {
    rules: [
      { test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' }
        ]
      }
    ]
  }
}

.babelrc

1
2
3
{
  "presets": [ "env", "react" ]
}

Adds support for Babel.

CSS

Terminal

1
2
3
npm install --save-dev \
  css-loader \
  style-loader

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  ···
  module: {
    rules: [
     { test: /\.css$/,
       exclude: /node_modules/,
       use: [
         { loader: 'style-loader' },
         { loader: 'css-loader' }
       ]
      }
    ]
  }
}

Your JavaScript

1
2
3
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

1
2
3
npm install --save-dev \
  postcss-loader \
  postcss-cssnext

webpack.config.js

1
2
3
4
5
6
7
8
9
···
// Inside module.rules[]:
{ test: /\.css$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'postcss-loader' }
···

postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: [
    require('postcss-cssnext')()
  ]
}

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

Other features

Dev server

package.json

1
2
3
4
5
{ ···
  "scripts": {
    "dev": "webpack-dev-server"
  }
}

Terminal

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

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