gulp-webpack | Gulp 4 Webpack 4 Babel BrowserSync Font Awesome | Style Language library

I need help here. I am bundling a custom library (named for the example LibraryJS and it uses lodash as dependency.

In the webpack configuration I setup lodash as an external dependency like so:

I'm trying to task webpack from gulp to process a directory that contains .js files. I'm using gulp-webpack 1.5.0. Gulp task is defined as:

building a modern Angular app here.

I am using gulp-webpack for fast development builds. I need webpack for my typescript bundling because I am obviously relying on some node modules. But weirdly enough, gulp-webpack doesn't seem to be automatically resolving imports to my node_modules directory! As a consequence, it throws about a million typescript errors saying it can't find the modules, and my bundle doesn't have, for example, angular in it.

Here's my (abbreviated) gulpfile:

I can't seem to work out the correct way to load third party libraries that depend on each other. I'm using TypeScript and Gulp with either Webpack or SystemJS for my module loader, both of which have similar errors in this case. My application code works if I use only jQuery, but if I try to use a jQuery plugin, like jQuery Validation, I get similar errors from both Webpack and SystemJS about jQuery being undefined.

There's kind of a lot of configuration for both setups, I'll demonstrate my most recent attempt at Webpack here:

My main.ts file:

I use webpack for working with JavaScript (ES6 modules bundling, converting to ES5, etc.) and gulp - for other tasks (jade, sass, etc.). I want to keep the webpack configuration in webpack.config.js, but to execute webpack by gulp task.

development　

　 　es6 - source JS

　　　　main.js

　 　js - output JS for development

　　　　index.js

production

　webpack.config.js

　gulpfile.js