Webpack: Proper Bower integration

[IngwiePhoenix]

For using bower modules, I have been using this:

https://www.npmjs.com/package/bower-webpack-plugin

However... When I define module aliases, this module will pick up the resolve first and instead require that module, although I have something else as an alias. For instance, defining an alias from jquery to jquip will result in this plugin still obtaining the jQuery files.

I saw, that within the docs, there is a way to integrate Bower into WebPack. I tried the example, and not a singe module was resolved... What is the actual, correct and best-to-go way to add Bower support without this plugin?

[mrm007]

I don't use bower-webpack-plugin but In my webpack.config.js I have this:

    // ...
    resolve: {
        modulesDirectories: ["thirdparty", "bower_components", "node_modules"]
    },
    plugins: [
        // ...
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"]),
        // ...
    ]
    // ...

Note "bower_components" in resolve.modulesDirectories. It tells webpack in which directories to search for when you requre("lodash").

If the module's main property in bower.json is not an array and it will work out of the box. Otherwise you have to create an alias to point to the correct file. For example, lodash's main points to the unminified file, but if you want the minified file you have to add this to your config:

    // ...
    resolve: {
        modulesDirectories: ["thirdparty", "bower_components", "node_modules"],
        alias: {
            // ...
            "lodash$": "lodash/lodash.min",
            // ...
        }
    }
    // ...

• Docs for resolve.alias
• Docs for resolve.modulesDirectories
• Docs for ResolverPlugin

[sokra]

File an issue there. There is an after-resolvers plugin for this...

[IngwiePhoenix]

@mrm007 Thanks! I used your config and it works right away. Phew, no longer do I need to delete modules in my bower_componentsto make aliases work properly. :) As a hint, some modules only provide a .bower.json.

@sokra Thanks for the hint, but that is no longer needed as I got it working :)