Cannot resolve load path in webpack

2
votes

I try to migrate gulp+browserify to webpack and I have problems resolving path.

Here is my project tree :

/path/to/project
├── webpack.config.js
└── www/static
        ├── build
        │   ├── js
        │   │   ├── main.js <-------│ Output wanted
        │   │   └── main.js.map <---│
        ├── js
        │   ├── app.js
        │   ├── contact.js
        │   ├── device.js
        │   └── ...
        └── sass
            ├── main.scss
            └── partials
                ├── _helpers.scss
                ├── _mixins.scss
                └── _variables.scss

And here is my config file : 

var path = require('path');

module.exports = {
    entry: { 'app': 'app.js' },

    resolve: {
        modulesDirectories: ['www/static/js/', './']
    },

    output: {
        filename: './www/static/build/js/main.js'
    },
    module: {
        loaders: []
    }
};

app.js content for testing purpose :

var $ = require('jquery'),
    Device = require('device'),
    Ga = require('ga');

require('jquery.raty');
require('jquery.autoNumeric');
require('jquery.unveil');

function initialize() {}

module.exports = {
    initialize: initialize,
};

And when I launch webpack I got the error with webpack --display-error-details :

ERROR in Entry module not found: Error: Can't resolve 'app' in '/path/to/project'
resolve 'app' in '/path/to/project'
  Parsed request is a module
  No description file found
  resolve as module
    /Users/jordid/MAWork/MA_vagrant/apps/node_modules doesn't exist or is not a directory
    /Users/jordid/MAWork/MA_vagrant/node_modules doesn't exist or is not a directory
    /Users/jordid/MAWork/node_modules doesn't exist or is not a directory
    /Users/jordid/node_modules doesn't exist or is not a directory
    /Users/node_modules doesn't exist or is not a directory
    /node_modules doesn't exist or is not a directory
    looking for modules in /path/to/project/node_modules
      No description file found
      No description file found
      as directory
        /path/to/project/node_modules/app doesn't exist
      no extension
        /path/to/project/node_modules/app doesn't exist
      .js
        /path/to/project/node_modules/app.js doesn't exist
      .json
        /path/to/project/node_modules/app.json doesn't exist

I don't understand why web pack search only in node_modules folder and not in 'www/static/js/' folder.

For information, I will have multiple entries, but for now I just want webpack works.

Thanks for help.

3
webpack

3 Answers

0
votes

According to webpack docs modulesDirectories should be an array of directory names. NOT paths.

For example, if the value is ["mydir"], webpack will look in “./mydir”, “../mydir”, “../../mydir”, etc.

0
votes

Got it.

I must use context option : 

entry: { 'app': 'app.js' },

resolve: {
    modulesDirectories: ['www/static/js/', './']
},

replaced by :

entry: { 'app' : './app.js' },
context: path.resolve(__dirname, './www/static/js/'),
0
votes

I don't think context is the correct way to handle this.

I would just make the path to my entry file absolute and forget resolve.modulesDirecories

But that's just me.