Migrating From Requirejs To Webpack

I'm migrating/moving a project based on require.js to webpack v3. Since all my modules are using the following syntax: define([modules,..], function(mod1,..) Which declares w

Solution 1:

AMD never found much use outside of requirejs so likely you will need to convert. There are tools that will help:

• https://github.com/anodynos/uRequire can convert code from AMD -> UMD / CommonJS

There are caveats from (https://github.com/anodynos/uRequire/wiki/nodejs-Template):

• Runtime translation of paths like models/PersonModel to ../../models/PersonModel, depending on where it was called from. You 'll still get build-time translated bundleRelative paths, to their nodejs fileRelative equivalent.

For most projects this is not an issue.

• Can't use the asynchronous version of require(['dep'], function(dep){...})

You should be able to use the synchronous version of require. If using webpack2 you can use System.import or require.ensure

• Can't run requirejs loader plugins, like text!... or json!...

You will find webpack version of all of these plugins

• There's no mapping of /, ie webRootMap etc or using the requirejs.config's {baseUrl:"...."} or {paths:"lib":"../../lib"}

This can be replicated with https://www.npmjs.com/package/babel-plugin-module-alias

Solution 2:

The CaptEmulation's answer is not valid for newer Webpack versions. Webpack supports AMD natively (neither additional loaders, nor plugins need to be installed). A thorough instruction is available here: https://webpack.js.org/api/module-methods.

This fact may easily go unnoticed when one tries to rewrite a RequireJS-based build to Webpack, as RequireJS uses relative paths without the trailing ./, e.g.

define('app/dep1', function(dep1) { ... });

which will not pass in Webpack without additional configuration (assuming that both require.config.js and webpack.config.js are in the same directory):

{
   resolve: {
      modules: [ './', ... ] // other entries possible here
   }
}