Follow along

http://eddie.ballisty.com/wp/

Webpack (and other tooling) in Mura

Don't build it, buy it.

Presented by Eddie Ballisty

Who am I?

Eddie Ballisty

Lead Architect at Blue River

What is it?

Webpack is a tool to build JavaScript modules in your application.

Why do we need it?

Webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order.

What makes it special?

HMR - Hot Module Reloader

Custom CSS / JS / File Loaders -- allows for CSS and Images in your Javascript

Intelligent code splitting to decrease initial file packet

Lazy load the rest

Let's get started!

First Time

We need node.js installed which gives us access to node package manager (npm).

Create common structure


mkdir hello_muracon
cd hello_muracon
npm init -y
npm install webpack --save-dev
mkdir src
touch index.cfm config.xml.cfm src/app.js webpack.config.js

File Content




  js = "#$.siteConfig('themeAssetPath')#/display_objects/hello_muracon/dist/bundle.js";


  

File Content





					

File Content



const root = document.querySelector('#root')
root.innerHTML = `

Hello MuraCon!

`

Webpack Config



// webpack.config.js
const webpack = require('webpack')
const path = require('path')

const config = {
  context: path.resolve(__dirname, 'src'),
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            ['es2015', { modules: false }]
          ]
        }
      }]
    }]
  }
}

module.exports = config
					

Finishing Touches



npm install babel-core babel-loader babel-preset-es2015 --save-dev


"scripts": {
  "start": "webpack --watch",
  "build": "webpack -p"
},
					

Great Success

What if I want to use another library?

Let's install lodash.

Made easy with Webpack!

Two Simple Steps



npm install lodash --save


// src/app.js
import {groupBy, forEach} from 'lodash/collection'
					

What if I want to use Mura.js?

All the speed and power of Mura in Webpack!

Add Mura.js as an external library



,externals: {
	mura: 'Mura'
}


// src/app.js
import Mura from 'mura';
					

The end result


// src/app.js
import {groupBy, forEach} from 'lodash/collection'
import Mura from 'mura';

Mura
	.getEntity('content')
	.loadBy('contentid', Mura.contentid, {fields:'peoplejson'})
		.then(function onSuccess(content) {
			
			const root = document.querySelector('#root')
			const people = JSON.parse(content.get('peoplejson'));
			const managerGroups = groupBy(people, 'manager');
			let peopleHTML = '';
			
			peopleHTML += '
    '; forEach(managerGroups, function(value, key) { peopleHTML += `
  • ${key}
  • `; peopleHTML += '
      '; forEach(value, function(value, key) { peopleHTML += `
    1. ${value.name}
    2. `; }); peopleHTML += '
    '; }); peopleHTML += '
'; root.innerHTML = peopleHTML; }, function onError(content) { alert(content.get('errors')); });

Thanks!