I'm having trouble setting up the absolute paths for an non-default directory structure

[dschissler]

I've been chipping away at the features and I've had success doing a lot of things with webpack. One thing that has plagued me for sometime is setting up a directory structure where the conf, bower and node modules are stored in a directory that is a sibling of the directory where my custom modules are stored.

I'm receiving the following error

ERROR in Entry module not found: Error: Cannot resolve module coffee-loader in /usr/local/webprojects/webpack/app/modules
resolve module coffee-loader in /usr/local/webprojects/webpack/app/modules

Note that I was successfully working with my node and bower directories being in different places before. Something about the absolute path situation is messing my project up, since it is not on the same branch.

My project is laid out like the following:

project
    build
        bower_components
        node_modules
        bower.json
        package.json
        webpack.config.js
    app
        modules (custom/proprietary commonjs modules)
        php
        view (Phalcon Volt partials)
        config (json configs so that socket.io and php can both connect)
        public
            index.php
    dist
        [working stuff will go here and will be fetched in the debug PHP template]

test might go inside of build or on the top level

I've set it up like this since PHP compilation will be a feature of this framework/scaffold

var path = require('path');
var webpack = require('webpack');
var console = require('console');

var resolveBowerPath = function(componentPath) {
    return path.join(__dirname, 'bower_components', componentPath);
};
var resolveNodePath = function(componentPath) {
    return path.join(__dirname, 'node_modules', componentPath);
};
var resolveModulePath = function(itemPath) {
    var appPath = path.resolve('../app');
    return path.join(appPath, 'modules', itemPath);
};


console.log(resolveBowerPath(''));
console.log(resolveNodePath(''));
console.log(resolveModulePath(''));
console.log(path.resolve('../app') + '/public/bundle');


module.exports = {
    cache: true,
    context: resolveModulePath(''),

    entry: {
      entryMain: './entryMain'
//      entryLogin: './entryLogin'
    },

    output: {
//        path: __dirname + '/public/bundle',
        path: path.resolve('../app') + '/public/bundle',
        publicPath: '/bundle/',
        filename: "[name].bundle.js",
        chunkFilename: '[id].bundle.js'
    },

    resolve: {
//        root: resolveModulePath(''),
        root: [resolveBowerPath(''), resolveNodePath(''), resolveModulePath('')],
        // tells webpack to query these directories for modules
//        modulesDirectories: ['bower_components', 'node_modules'],
        modulesDirectories: [resolveBowerPath(''), resolveNodePath(''), resolveModulePath('')],
//        modulesDirectories: ['./bower_path', './node_modules', resolveModulePath('')],

        alias: {
            lodash: resolveBowerPath('/lodash/dist/lodash'),
            jquery: resolveBowerPath('/jquery/dist/jquery'),
            angular: resolveBowerPath('/angular/angular'),
            angularRouter: resolveBowerPath('/angular-ui-router/release/angular-ui-router'),
            angularCookies: resolveBowerPath('/angular-cookies/angular-cookies'),
            angularResource: resolveBowerPath('/angular-resource/angular-resource'),
        },
        extensions: [
            '',
            '.js', '.coffee',
            '.html', '.jade',
            '.css', '.styl', '.scss', '.less'
        ]        
    },
    plugins: [
        new webpack.ProvidePlugin({
            _: 'lodash',
        }),
        // this plugin makes webpack not only looking for package.json, but also for a bower.json with a main-field
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ]),
        new webpack.DefinePlugin({
          VERSION: JSON.stringify('alpha'),
          DEVEL: true
        })
    ],

    module: {
        loaders: [
            // Exports Angular
            { test: /[\/]angular\.js$/, loader: "exports?angular" },
            // Script Loaders
//            { test: /\.coffee$/, loader: "coffee" },
            { test: /\.coffee$/, loader: "coffee-loader" },

            { test: /\.html$/, loader: "html" },
//            { test: /\.jade$/, loader: "jade" },
            { test: /\.jade$/, loader: "template-html-loader" },
            // Style Loaders, style! inlines the css into the bundle files
            { test: /\.css$/, loader: "style!css" },
            { test: /\.scss$/, loader: "style!css!sass" },
            { test: /\.less$/, loader: "style!css!less" },
            { test: /\.styl$/, loader: "style!css!stylus" }
        ]
    }

};

I've tried a variety of things and this is what I have at the moment. So, I'm missing something small and obvious right?

[jhnns]

Is this a less-loader issue?

[sokra]

loaders doesn't resolve with resolve but with resolveLoader.

[sokra]

        modulesDirectories: [resolveBowerPath(''), resolveNodePath(''), resolveModulePath('')],

This line makes no sense...

[dschissler]

@jhnns its not a less-loader issue.

@sokra I figured that it is relative. It doesn't seem like webpack likes to go horizontal but assumes that it will be at the base of the tree with stuff going out from there.

I think that I'm getting in trouble here because I don't want to use './' to call my modules since it makes it pretty weird to call another module inside of a module since I would need to use '../' for the path.

[dschissler]

I want my module folder, node_modules and output to all be able to go anywhere. Currently the best that I can get is that my modules, node_modules and bower_components are all at the same level or deeper down the tree from my webpack.config.js. I'm doing this because I want 'app' to be only user code and to have nothing cached or built there since there are a variety of built pieces between phalcon Volt templates, PHP compiles (Zend or whatever) and the webpack bundle.

[dschissler]

I have it working. I think that the key was setting resolve.root to an array and ignoring root.modulesDirectories.

var path = require('path');
var webpack = require('webpack');
var console = require('console');


var appModulesPath = path.join(path.resolve('../app'), 'modules');
var nodeModulesPath = path.join(__dirname, 'node_modules');
var bowerComponentsPath = path.join(__dirname, 'bower_components');

module.exports = {
    cache: true,

    context: appModulesPath,
    entry: {
        entryMain: './entryMain',
        entryLogin: './entryLogin'
    },

    output: {
        path: path.resolve('../app') + '/public/bundle',
        publicPath: '/bundle/',
        filename: "[name].bundle.js",
        chunkFilename: '[id].bundle.js'
    },

    resolve: {
        root: [appModulesPath, nodeModulesPath, bowerComponentsPath],

        alias: {
            lodash: 'lodash/dist/lodash',
            jquery: 'jquery/dist/jquery',
            angular: 'angular/angular',
            angularRouter: 'angular-ui-router/release/angular-ui-router',
            angularCookies: 'angular-cookies/angular-cookies',
            angularResource: 'angular-resource/angular-resource'
        },
        extensions: [
            '',
            '.js', '.coffee',
            '.html', '.jade',
            '.css', '.styl', '.scss', '.less'
        ]
    },
    resolveLoader: {
        root: nodeModulesPath
    },

    plugins: [
        new webpack.ProvidePlugin({
            _: 'lodash',
        }),
        // this plugin makes webpack not only looking for package.json, but also for a bower.json with a main-field
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ]),
        new webpack.DefinePlugin({
          VERSION: JSON.stringify('alpha'),
          DEVEL: true
        })
    ],

    module: {
        loaders: [
            // Exports Angular
            { test: /[\/]angular\.js$/, loader: "exports?angular" },
            // Script Loaders
            { test: /\.coffee$/, loader: "coffee" },
            // Markup Loaders
            { test: /\.html$/, loader: "html" },
            { test: /\.jade$/, loader: "template-html-loader" },
            // Style Loaders, style! inlines the css into the bundle files
            { test: /\.css$/, loader: "style!css" },
            { test: /\.scss$/, loader: "style!css!sass" },
            { test: /\.less$/, loader: "style!css!less" },
            { test: /\.styl$/, loader: "style!css!stylus" }
        ]
    }

};

[dschissler]

@sokra I did a test with stylus and less and it works for stylus but is broken for less. My app modules directory is off of a different directory tree and less-loader doesn't know how to find the modules directories with '~' but the stylus one does.

My project structure:

project
  app
    webpack
      [entry files]
      modules
        theme
          theme.coffee (called by main section and requires both ./test1.less and ./test1.styl)
          test1.less
          test1.styl
  devel
    bower_components
      bootstrap
        test.styl
        test.less
    node_modules
    res (webpack output)
    [gulp, webpack.config, etc]

theme.coffee:

require './test1.styl'
require './test1.less'

test1.styl

@import './test2.styl'
@import '~bootstrap/test.styl'

test1.less

@import './test2.less';
@import '~bootstrap/test.less'

All of the theme files that are imported are empty. The stylus loader knows how to find files in the current directory and also in the modulesDirectories but the less loader only knows how to find files relative to the current path.

[edit] So there is some path assumption being made in the less loader that is more generalized in the stylus loader.

[dschissler]

It appears that bootstrap 3.2 fixed whatever the issue was with paths and urls once it is loaded and so I'm able to use the require '../../../theme/bootstrap/less/bootstrap' and it appears to work. It would be real nice to use '~bootstrap/less/bootstrap' though.

[edit] Damn now I realize that I was hitting a double bug before and it was making my head spin. I'm glad that I just backed off of it for a while.

[edit] I realized that this might be ambiguous so I'll add that the main less-loader bug is still broken.

[alpha-X-omega]

@dschissler

Hi,

After searching on Google and tracing through threads, I ended up here. Did you ever figure out a solution for your original post? After many configurations, I'm thinking webpack doesn't allow this....

Thanks!

[dschissler]

@phnguyen89 Yes I found a solution a long time ago and you can see it in the gulpfile.webpack.js of my project. It will likely involve the context, resolve.root, resolve.modulesDirectories and resolve.resolveLoader.

[jhnns]

So this can be closed? I think it's a rather specific issue and not related to the less-loader.

[alpha-X-omega]

@dschissler Thank you for the prompt reply. Unfortunately, I wasn't able to achieve a purely webpack.config.js file even with those settings. I gave up and just added the additional ".babelrc" file (sigh).

@jhnns Man, you guys are fast. I only got to replying just now. I only wanted to ask a question, not raise an issue. Thanks for closing it!

[dschissler]

@phnguyen89 Last time that I tried about two weeks ago I wasn't able to get Babel 6 working with my setup so I've dropped back to version 5 for now. I'm going to give it a bit of additional time and then I will raise issues about it. It will be involved and difficult to figure out what is happening so I'm putting it off as long as possible.