Migrate existing RequireJS app to use Webpack

Question

I'm trying to migrate our app that uses RequireJS to Webpack and having issues with the existing modules.

Below is the application's folder structure:

App
--js
----custom
----lib
----app.build.js
----config.js
----app-loader.coffee

lib and custom folders contain different modules

app.build.js file:

 ({ appDir: ".", baseUrl: ".", dir: "../build", findNestedDependencies: true, mainConfigFile: 'config.js', modules: [ { name: "app-loader", include: ["domReady"] } ], optimize: "uglify", optimizeCss: "none", pragmas: { logExclude: true } }); 

config.js :

 (function () { require.config({ paths: { 'bootstrap': 'lib/bootstrap/dist/js/bootstrap', 'domReady': 'lib/domReady/domReady', 'jquery': 'lib/jquery/jquery.min', 'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min', 'jquery.browser': 'lib/jquery.browser/dist/jquery.browser', 'jquery.chosen': 'lib/chosen/chosen.jquery.min', 'jquery.cookie': 'lib/jquery.cookie/jquery.cookie', 'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min', 'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload', 'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min', 'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min', 'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput', 'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd', 'jquery.ui': 'lib/jquery-ui/jquery-ui', 'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget', 'jquery.validate': 'lib/jquery-validation/dist/jquery.validate', 'json2': 'lib/JSON-js/json2', 'swfobject': 'lib/swfobject/swfobject/swfobject', 'sugar': 'lib/sugar/release/sugar.min', 'underscore': 'lib/underscore/underscore-min' }, packages: [ ], shim: { "bootstrap": { "deps": ['jquery'] }, 'jquery-bbq': { deps: ['jquery.browser'] }, 'jquery.cookie': { deps: ['jquery'], exports: 'jquery.cookie' }, 'jquery.colorpicker': { deps: ['jquery'] }, 'jquery.tablednd': { deps: ['jquery'] }, 'json2': { deps: ['jquery'], exports: 'JSON' }, 'swfobject': { exports: 'swfobject' }, 'underscore': { exports: '_' } } }); }).call(this); 

app-loader.coffee :

 equire ['config'], -> require ['jquery.ui', 'jquery.validate'], -> _appDeveloper?() require [ 'custom/application/footer' 'custom/application/floatingwindow' 'custom/application/join' 'custom/application/login' 'custom/application/main' 'custom/application/menu' 'custom/application/message' 'custom/application/topmenu' ] 

My webpack.config.js :

 var webpack = require('webpack'), path = require('path'), glob = require('glob'); var config = { context: __dirname + 'App/js', entry: { app: 'app-loader.coffee' }, output: { path: __dirname + '/public/js', filename: '[name].js', chunkFilename: '[id].[name].js' }, plugins: [ new webpack.ProvidePlugin({ _: 'underscore', $: 'jquery' }) ], module: { loaders: [ {test: /bootstrap/, loader: 'imports?jquery'}, {test: /jquery-bbq/, loader: 'imports?jquery.browser'}, {test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery'}, {test: /jquery.colorpicker/, loader: 'imports?jquery'}, {test: /jquery.tablednd/, loader: 'imports?jquery'}, {test: /json2/, loader: 'exports?JSON!imports?jquery'}, {test: /swfobject/, loader: 'exports?swfobject'}, {test: /\\.coffee$/, loader: 'coffee-loader'} ] }, resolve: { extensions: ['', '.coffee', '.js'], root: [__dirname + '/App/js'], alias: { 'bootstrap': 'lib/bootstrap/dist/js/bootstrap', 'domReady': 'lib/domReady/domReady', 'jquery': 'lib/jquery/jquery.min', 'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min', 'jquery.browser': 'lib/jquery.browser/dist/jquery.browser', 'jquery.chosen': 'lib/chosen/chosen.jquery.min', 'jquery.cookie': 'lib/jquery.cookie/jquery.cookie', 'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min', 'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload', 'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min', 'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min', 'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput', 'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd', 'jquery.ui': 'lib/jquery-ui/jquery-ui', 'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget', 'jquery.validate': 'lib/jquery-validation/dist/jquery.validate', 'json2': 'lib/JSON-js/json2', 'swfobject': 'lib/swfobject/swfobject/swfobject', 'sugar': 'lib/sugar/release/sugar.min', 'underscore': 'lib/underscore/underscore-min' } }, resolveLoader: { root: path.join(__dirname, 'node_modules') } }; module.exports = config; 

As soon as I run webpack I'm getting the following error messages:

ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery
validation/dist/jquery.validate' in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4

ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery-ui/jquery-ui' 
in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4

ERROR in /Users/user/project/App/js/custom/random/join.coffee
Module not found: Error: Cannot resolve module 'jquery-
validation/dist/jquery.validate' in 
/Users/user/project/App/js/custom/random
@ /Users/user/project/App/js/custom/random/join.coffee 1:0-64:2

Not sure what else I am missing in the webpack's configuration file...

Answer 1

Based on @Tom Chen 's comment, I was able to dig into my config further and resolved it by adding Node and 'Bower' modules in resolve.modulesDirectories section of the config file.

Below is my Webpack.config.js file:

 var webpack = require('webpack'), path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); var plugins = [ new webpack.ProvidePlugin({ '_': 'underscore', $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), new ExtractTextPlugin(__dirname + '/Content/css/[name].css'), new webpack.optimize.CommonsChunkPlugin( /* chunkName= */"vendor", /* filename= */"vendor.js" ), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ]; if (process.env.NODE_ENV === 'production') { var optPlugins = [ new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ minimize: true }) ]; plugins = plugins.concat(optPlugins); } var config = { context: __dirname + '/App/js', entry: { app: 'app-loader.coffee', vendor: [ 'bootstrap', 'underscore', 'jquery', 'jquery-bbq', 'jquery.chosen', 'jquery.browser', 'jquery.cookie', 'jquery.colorpicker', 'jquery.fileupload', 'jquery.scrollTo', 'jquery.tagsinput', 'jquery.tablednd', 'jquery.ui', 'jquery.ui.widget', 'jquery.validate', 'json2', 'swfobject', 'sugar' ] }, output: { path: __dirname + '/Content/js', filename: 'app-loader.js' }, amd: { jQuery: true }, node: { fs: 'empty' }, module: { loaders: [ { test: /bootstrap/, loader: 'imports?jQuery=jquery' }, { test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery' }, { test: /jquery.colorpicker/, loader: 'imports?jquery' }, { test: /jquery.tablednd/, loader: 'imports?jquery' }, { test: /json2/, loader: 'exports?JSON!imports?jquery' }, { test: /swfobject/, loader: 'exports?swfobject' }, { test: /\\.coffee$/, loader: 'coffee-loader' }, { test: /\\.css$/, loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader' ) }, { test: /\\.scss$/, loader: ExtractTextPlugin.extract( 'style-loader', '!css-loader!sass-loader' ) }, { test: /\\.less$/, loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!less-loader' ) } ] }, plugins: plugins, resolve: { extensions: ['', '.coffee', '.js', '.json'], root: [path.resolve(__dirname + '/App/js')], alias: { 'jquery': 'jquery/jquery', 'jquery-bbq': 'jquery-bbq/jquery.ba-bbq', 'jquery.cookie': 'jquery.cookie/jquery.cookie', 'jquery.chosen': 'chosen/chosen.jquery.min', 'jquery.colorpicker': 'jQuery-ColorPicker/colorpicker', 'jquery.fileupload': 'blueimp-file-upload/js/jquery.fileupload', 'jquery.scrollTo': 'jquery.scrollto/jquery.scrollTo', 'jquery.tagsinput': 'jquery-tags-input/src/jquery.tagsinput', 'jquery.tablednd': 'TableDnD/js/jquery.tablednd', 'jquery.ui': 'jquery-ui/jquery-ui', 'jquery.ui.widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget', 'jquery.validate': 'jquery-validation/dist/jquery.validate', 'json2': 'JSON-js/json2' }, modulesDirectories: [ 'node_modules', 'bower_components' ], bail: true, stats: { colors: true, modules: true, reasons: true } } }; module.exports = config; 

Answer 2

From your error message of webpack, I believe you've missed some dependencies. Adding those to resolve.alias object might help:

'jqueryvalidation/dist/jquery.validate', 'jquery-ui/jquery-ui',