Webpack包名为requirejs modules

Question

In my company we have a significant AMD RequireJS code base and I am trying to use webpack to bundle some of it. Here is what the architecture looks like:

somedir
│   app.js
│
└───anotherdir
    |
    ├─── module1
    │       file1.js
    │       file2.js
    │
    ├─── module2
    │       file3.js
    │
    └─── module3
            file4.js
            file5.js
            file6.js

Each file is written like that :

define('ATAG/MODULE/ID, ['somedeps'], function (somedeps) {});

So for instance file1.js could look like

define('ATAG/module1/file1, [], function () {});

And we have a RequireJS config which maps ATAG to anotherdir and we possibly have some more config for different tags.

Now I am trying to create a bundle from app.js with webpack but I have no idea of how to replicate the behavior we have with require.config({ paths: { ATAG: 'anotherdir' } }) .

So far my attempts with resolve.alias have not been successful.

Is it even possible to achieve something like this with webpack based on our usage of RequireJS (not requiring relative paths) ?

Thank you.

Answer 1

You were on the right path with resolve.alias :

// foo.js
var a = require('ATAG'); // resolved to anotherdir/index.js
var b = require('ATAG/bar'); // resolved to anotherdir/bar.js

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

module.exports = {
    entry: './foo',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        alias: {
            ATAG: path.join(__dirname, '/anotherdir')
        }
    }
};