Webpack with bower support

问题:

Would I like to load preferably the node packages, and only if not exist, loads the bower package.

I would just use the node package only as recommended in Webpack site, but I need to load a library that is just in bower, https://github.com/Stamplay/stamplay-js-sdk and https://github.com/Stamplay/angular-stamplay

Try with bower-webpack-plugin

I installed https://github.com/lpiepiora/bower-webpack-plugin

But when I run webpack-dev-server -d --watch the error is displayed in chrome console:

Uncaught TypeError: angular.module is not a function(anonymous function) @ app.js:8__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39 angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

Try with ResolverPlugin (see Webpack docs)

In webpack.config i add..

plugins: [      ...     , new webpack.ProvidePlugin({         Q: 'q',         store: 'store.js',         Stamplay: 'stamplay-js-sdk'     })     , new webpack.ResolverPlugin(         [             new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])         ], ["normal", "loader"]     )  ], .... resolve: {     root: [         path.join(__dirname, 'node_modules'),         path.join(__dirname, 'bower_components')     ], 

But, like mention here the Stamplay object is not correct!

Trying with CDN and angular-webpack-plugin

First add script tag into index.html ..

Second, add externals in webpack.config ..

externals: {     stamplay: 'Stamplay' }, 

And finally .. new AngularPlugin into plugins on webpack.config

This way, worsks but I cant use angular-stamplay, when I try, a error in module stamplay apper. :(

See branch with this change here

The full project is here: https://github.com/Ridermansb/webpackBowerStarter

回答1:

Ok, tried your project from git https://github.com/Ridermansb/webpackBowerStarter

And as mentioned at https://github.com/lpiepiora/bower-webpack-plugin/issues/20 I too had that Cannot resolve module 'stamplay-js-sdk' issue , then in webpackBowerStarter directory I did bower install stamplay-js-sdk then sudo npm run build and voila! It was done.

On npm run start which is same as webpack-dev-server -d --watch I get http://localhost:8080/webpack-dev-server/ like

And console says

sry if u meant something else. Does this resolves your issue ?

文章来源: Webpack with bower support