Migrating from RequireJS to Webpack

Minimal amount of changes in actual code

Webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD. Existing code using define() function doesn’t need modification.

Migrating Require.js config to Webpack config

The first thing to do when converting from Require.js to Webpack is to take your whole Require.js configuration file (requirejs_config.js) and convert it into Webpack configuration file (webpack.config.js).

Module Path Resolution

Help Webpack to find your module files.

// Webpack
    {
        resolve: {
            modules: [
                'app/assets/javascripts',
                'app/assets/stylesheets'
            ],
        }
    }

NPM in place of Bower components

You can use NPM in place of Bower components , since we can configure easily in Webpack to load NPM dependencies

// Webpack
    {
        resolve: {
            modules: [
                'app/assets/javascripts',
                'app/assets/stylesheets',
                'node_modules'
            ],
        }
    }

Aliases

Migrate Require.js paths to webpack alias

// Require.js
    {
        paths: {
            'foundation-core': './foundation/js/foundation/foundation',
            'foundation-abide': './foundation/js/foundation/foundation.abide',
            'foundation-accordion': './foundation/js/foundation/foundation.accordion'
        }
    }

// Webpack
    {
        resolve: {
            alias: { 
                'foundation-core': 'foundation-sites/js/foundation/foundation',
                'foundation-abide': 'foundation-sites/js/foundation/foundation.abide',
                'foundation-accordion': 'foundation-sites/js/foundation/foundation.accordion'
            }
        }
    }

Shim

Require.js shim takes modules that are not AMD compatible and makes them compatible.

//Require.js
    {
        'shim': {
            'foundation-core': { 'deps': ['jquery'] },
            'foundation-abide': { deps: ['foundation-core'] }
        }
    }

//Webpack
    {
        resolve: {
            module: {
                rules: [{
                    test: /foundation-core/,
                    use: ['imports-loader?jquery']
                },
                {
                    test: /foundation-abide/,
                    use: ['imports-loader?foundation-core']
                }]
            }
        }
    }