Migrate from RequireJS to webpack

14 August 2017

I started this year a small Backboneproject used by me to learn front end development. It uses a combination of Apache and RequireJS configuration to locate and deliver the scripts to the browser. RequireJS is used to modularize the code and provide dependencies:

This setup works really well, especially for a small project like this one, but it was time to move on to webpack and my intention was to remove RequireJS configuration, add the webpack one and change the code only if it is really, really needed.

The first step was to add a package manager but this was already done in a previous post. I chose to use Yarn and I still had to use Bower as a post install script.

package.json:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

{

"name":"library-backbone",

"version":"1.0.0",

"main":"/js/Library.js",

"repository":"git@github.com:vasileboris/library-backbone.git",

"author":"vasile boris <boris@espressoprogrammer.com>",

"license":"MIT",

"dependencies":{

"backbone":"^1.3.3",

"jquery":"^3.2.1",

"requirejs":"^2.3.3",

"requirejs-text":"^2.0.15"

},

"scripts":{

"postinstall":"bower install"

}

}

The next step was to add needed dependencies for webpack and apply necessary changes to the project: