/ talks

Webpack

These are the notes from my Kochi Twitter developer meet talk.

  • import files
  // app.js
  import bar from './bar';
  bar();


  // bar.js
  export default function bar() {
    return "hello from bar.js";
  }

Getting Started

  • npm init

  • npm install --save-dev webpack

  • create src/index.js

  • create public/index.html

  • npm install --save lodash

  • import _ from 'lodash';

  • remove _ from html

  • add bundle.js

  • ./node_modules/.bin/webpack src/index.js dist/bundle.js

  • --display-modules to show all modules

Modules

  • import and export statements have been standardized in es2015, webpack support them out of the box.
  • webpack won't support other es2015 features.

Configuration

  • create webpack.config.js
  • const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  • ./node_modules/.bind/webpack
  • add webpack to package.jsonscripts

Loading CSS

  • npm install --save-dev style-loader css-loader
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  • style loader
  • css loader - interprets import css from 'file.css';

Loading Images

  • npm install --save-dev file-loader
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
  • import Logo from './logo.png';
  • a = new Image(); a.src=Logo;
  • background: url('./logo.png');
  • fonts will also work with file loader.

Output Management

  • multiple output files
  entry: {
    app: './src/index.js',
    home: './src/home.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  • HtmlWebpackPlugin
  • npm install --save-dev html-webpack-plugin
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],

Development

  • error debug - devtool: "inline-source-map"
  • webpack --watch

live reload

  • npm install --save-dev webpack-dev-server
     devServer: {
       contentBase: './dist'
     },

Deadcode elimination / Tree Shaking

  • npm i --save-dev uglifyjs-webpack-plugin
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  plugins: [
    new UglifyJSPlugin();
  ]

Production

  • npm install --save-dev webpack-merge

  • webpack.common.js, webpack.dev.js, webpack.prod.js

  // webpack.dev.js
  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');
 
  module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist'
    }
  });
  // webpack.prod.js
  const merge = require('webpack-merge');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  const common = require('./webpack.common.js');
 
  module.exports = merge(common, {
    plugins: [
      new UglifyJSPlugin()
    ]
  });
  • npm scripts
  • start: webpack-dev-server --open --config webpack.dev.js
  • build: webpack --config webpack.prod.js

Code splitting

  • CommonsChunkPlugin
  const webpack = require('webpack');
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common'
  })
  • moving out third-party libraries
  plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor'
     }),
  ]
  entry: {
    app: './src/index.js',
    vendor: [
      'lodash'
    ]
  },
  • ExtractTextWebpackPlugin
  • npm install --save-dev extract-text-webpack-plugin
  const ExtractTextPlugin = require("extract-text-webpack-plugin");

  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]

  rules: [
     {
       test: /\.css$/,
       use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader"
       })
     },

Caching

  • [chunkhash] in filename

Babel

  • npm install --save-dev babel-loader babel-core babel-preset-env
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }