Gulp with WebPack. Which should be building my coffee/jade etc.?

Question

I have a pre-existing project that is currently using gulp.

The key libraries/frameworks/languages are:

• MongoDB - Mongoose
• AngularJS - With ui-router, also using ngClassify
• ExpressJS - With Passport
• NodeJS
• Jade
• Coffeescript
• Sass - '.sass' format
• JPG/PNG's

Currently everything is watched using live reload, minified using uglify and gzipped. My angular html view/directive snippets are sent into a template cache js file. Even the images are minified using image min.

The single page app is very modular by design, there are multiple 'pages' to the app, each page has a specific use (Take the profile page for example), using ui-route to nest views. Not all users will use each page. Hence why I am choosing to move towards WebPack with each 'page' being a module. The goal for this application is to be as reactive as possible. With potential mild load times when switching which page/module they are on.

My current project structure has a src and dist directory each with a server and client folder. the list directory can of course be safely deleted with every build. I currently have no raw js files or raw html (aside from the gulpfile.js that just requires my gulpfile.coffee), everything gets preprocessed by gulp and thats it.

So here are my questions:

1. Do I replace most of my gulpfile with webpack, and let webpack process everything (Whats the advantage of this). Or do I create an intermediary folder (The gulp output), then run webpack on that folder (just dealing with the minified js/css/html files). Basically, knowing what my libraries/frameworks are, and my situation, how would you structure the build process?
2. Can you use an ngClassify app.coffee file as an entry point? Or does it have to be compiled first. (If you can, how?)

Answer 1

You can certainly use Gulp to trigger your Webpack build and manage other tasks you may have however the idea of Webpack is that it is your entire build, you no longer need Gulp tasks to 'minify, 'concatenate' and 'imagemin' files etc as Webpack does all this for you by using Plugins and Loaders.

You will have to run Webpack on the project source, not an already minified bundle created by your custom Gulp build.

The angular questions I don't have an answer to I'm afraid :)