webpack ⚡talk

with eric katz

why webpack?

When you start doing javascript...

<head>
...
<script src="main.js"></script>
<!-- 3kb -->


</head>

It grows...

<head>
...
<script src="main.js"></script>
<!-- 100kb -->


</head>

Reorganize

<head>
...
<script src="jquery.js" />
<script src="main.js" />
<script src="login.js" />
<script src="map.js" />
<script src="contact.js" />
<!-- smaller pieces -->


</head>

Make modules, turn to build tools

<head>
...
<script src="/dist/main.min.js" />

</head>

Write specific tasks... scripts, styles, build, dev

webpack is just the next iteration

on the road to a better process

source: http://www.lakearrowhead.com/

webpack concepts

Entry

Output

Loaders

Plugins

webpack concepts - entry

module.exports = {
  entry: './src/main.js'
};
// will default check node_modules to resolve

module.exports = {
  entry: {
    main: './src/main.js',
    vendors: ['jquery', 'jquery.tablesorter.js']
  }
};

webpack concepts - output

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  }
};
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack concepts - loaders

const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

webpack concepts - plugins

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.(js|jsx)$/, 
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

module.exports = config;

AND... 

More cool things

  • Tree Shaking // Code Efficiency
  • Webpack Dev Server // Dev environment
  • Hot Reloading // Better than live reload, I promise
  • Built in Asset Handling

https://webpack.js.org/

Thanks!