johnstew

export function foo() {
  console.log('foo called');
}

export function bar() {
  console.log('bar called');
}

johnstew

import { foo } from './utils';

foo();

johnstew

{
    "presets": [
        [
            "env", {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                },

johnstew

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {

johnstew

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'index.js'),
  output: {
    filename: 'index.bundle.js',
    path: path.join(__dirname, 'build')
  }
};

johnstew

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

1. Common JS support
2. NPM support
3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

johnstew

git fetch --all
git reset --hard origin/master
git pull origin master

johnstew

{
  "extends": ["airbnb"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react"],

johnstew

getset: function(model, prop, value) {
  var last = model.get(prop);

  if (value !== undefined) {
    model.set(prop, value);
  }

  return last;
}

johnstew

var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      './src/app.js',
      'webpack-dev-server/client?http://localhost:8080'
    ]
  },