I'm kinda new to WebPack and Angular 4. I've seen many articals that intro the new template but none of them walk-though on how to use it in real-world apps, I saw some posts that define the custom CSS for each angular component and import or require it to use it. I think my case is different (maybe i am wrong).
First step to utilize the template is to create my layout HTML which is based on limitless template, limitless is using a lot of 3rd party JS libraries such as Ace, Beautify, BlockUI, Pace, etc and at least couple of CSS files, and custom JS files to get the template to work. I understand that I should break the UI into components such as header, nav-bar etc.. but I will worry about that later.
I have a lot of question, and it all related on what\how\where (basics)!
Package.json
1: What is the difference between dependence and devDependence?
2: If I will use moment, underscore, ace or any vendor JS library, should I add it to dependence or devDependence?
Webpack.config
3: I think next step is to add those packages to webpack.config.vendor.js but add to treeShakableModules or nonTreeShakableModules and what is the difference?
4: How to use those packages in my app? I tried to consume moment() from browser console and I learned that these libraries to be exported to global and the way WebPack is doing it is by defining plugin new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) I tried to do the same for moment or underscore but still not working.
5- Where should I put my custom CSS and JS for the limitless template to work, inside ClientApp\assets? When I add them there and after running webpack I searched the bundled files and couldn't find my custom JS and CSS.
6- Basically the custom CSS and JS will be used by the _Layout.chtml and they should be global for all other components to use them, so how I can consume it in _layout and in other angular components?
I'm sorry, I've asked a lot of question, maybe you can answer some or all, or direct me to a tutorial, post online that expand the VS template, and add more functionality, explain each aspect of the template instead of limited introduction about the template.
Thank you so much in advanced.
I ended up using Angular CLI, MS SPA template is not straight forward and require a lot of work to get things to work