who am i? 

JavaScript Developer @Rapid7


Open source contributor   


All round JavaScript nerd

Javascript @rapid7 

Webpack 

The flexible module loader 

Before

<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="marionette.js"></script>
<script src="app.js"></script>
<body>
<div id="content"></div>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="marionette.js"></script>
<script src="app-people-serivce.js"></script>
<script src="app-people-model.js"></script>
<script src="app-people-controller.js"></script>
</body>

We had this

Or this

MAINTENANCE 

Module loaders

  • Require JS
  • Curl
  • System JS
  • Webpack

Similar advantages:

- Easy loading of third party libraries 

- Reduce pollution of the Window object

- load JavaScript asynchronously 

Webpack

Pros:

- Not opinionated

- Setup is simple 

- No need to change/maintain during development

- Works with browser and server 

- Loaders for preprocessing code 

- Hot reloading 

- And the list goes on... 

Getting started

npm install webpack -g
//myApp.js
import {Chris} from 'presenters'

Chris.present();

Simple? 

webpack ./myApp.js bundle.js

configuration 

entry: {
    main: './src/js/module'
},
output: {
    filename: "myapp.min.js",
    library: 'MyApp',
    path: '/dist/js' //Required 
}

Entry and output 

configuration 

module: {
    loaders: [
        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'},
        {test: /\.scss$/, include: /src/, loaders: ["style", "css", "sass"]},
        {loader: "style!css", test: /\.css$/},
        {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
             loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
}

Module loaders  

http://webpack.github.io/docs/loaders.html

import 'myStyles.scss';

//or

import styles from 'myStyles.scss';
styles.header;

configuration 

resolve: {
    root: srcPath,
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: ['node_modules', 'src/js'],
    alias: {
        jquery: path.join(__dirname, '/node_modules/jquery/dist/jquery.js')
    }
}

Resolve  

leads to   

require('any node module'); //In the browser 


require('components/my-component'); 
//Instead of 
require('../../components/my-component');

configuration 

devServer: {
    contentBase: './tmp'
}

Dev Server 

webpack-dev-server

Command line  

Running 

webpack-dev-server --hot --inline --progress --colors

Development

webpack --progress --profile --colors

Production build

https://webpack.github.io/docs/examples.html

Questions?

Slides: http://slides.com/chrislaughlin/webpack/

@chrislaughlin

Webpack

By Chris Laughlin

Made with Slides.com

Webpack

  • 1,959

More from Chris Laughlin