How to resolve absolute requests using webpack?

Question

I am trying to convert an existing website to use webpack, but all existing paths require absolute values:

var Component = require('/path/to/my/component'); 

I read the webpack documentation and also found this answer about path resolution, but could not solve my problem. When installing resolve.root in accordance with the instructions of the answer above, I managed to get the following:

 var Component = require('./path/to/my/component'); var Component = require('path/to/my/component'); 

However, I still cannot understand how to get the absolute path of work, and I would prefer not to go through and update all my paths. Here is the site structure:

 /app /assets /javascripts /build package.js index.js /node_modules 

webpack.config.js:

 var JS_ROOT = __dirname + '/app/assets/javascripts'); module.exports = { entry: JS_ROOT + '/index', output: { path: JS_ROOT + '/build', filename: 'package.js' }, ... resolve: { root: JS_ROOT } }; 

The error I am getting is:

 Module not found: Error: Cannot resolve 'file' or 'directory' /path/to/component in /Users/<username>/<ProjectRoot>/app/assets/javascripts 

What am I doing wrong?

Answer 1

The resolve.root configuration parameter may be what you are after. This is described here: http://webpack.imtqy.com/docs/configuration.html#resolve-root

resolve.root The directory (absolute path) containing your modules. It can also be an array of directories. This option should be used to add individual directories to the search path.

It must be an absolute path! Do not pass something like. / app / modules.

Example:

var path = require ('path');

// ... resolution: {root: [path.resolve ("./ applications / modules), path.resolve ('./ vendor / modules')]}