Webpack bundle analyzer. Webpack bundle analyzer is a tool that analyzes a webpack stats JSON file that the Angular CLI can generate automatically upon building the app. First, you’ll want to install webpack-bundle-analyzer in your project as a dev dependency: $ npm i webpack-bundle-analyzer -save-dev # or, using Yarn: $ yarn add webpack.
I'm currently working on an Angular 2 project and using Webpack 2 for bundling code and assets. The Angular application uses Bootstrap and a styles.css containing some global styles across the board.
Furthermore the Angular components themselves have their own style sheets in seperate .css files. See the below file structure as an example:
At the moment, Webpack takes all of these files both .css and .js and bundles them together, so I have the following output (CSS combined into javascript):
The problem I have mainly is that this creates a FOUC (Flash of Unstyled Content) - From my understanding the way to fix it is changing the code split for CSS to output CSS into its own file so it can be asynchronously loaded by the browser - using the Extract-Text-Webpack-Plugin.
This works great except using this method I'm left with another problem. I lose the ability to have modular CSS that Angular provided through the component.css files...
So I have the following 2 questions:
1.) How do I configure Webpack to just extract Bootstrap and my styles.css into e.g. 'dist/styles.css' but bundle the rest of the 'non-global' css files as part of the javascript bundles that Webpack creates me?
2.) Is it possible to inject this extracted CSS into the HEAD section of index.html just like the bundles are being injected through HTML-webpack-plugin?
(This is so I don't have to hard-code the href in to point to the output path that could potentially change if someone alters the Webpack config.)
My current solution to this problem was to use copy-webpack-plugin to move bootstrap.min.css and styles.css to dist and use a hard-coded link in index.html - But I do not like that setup. Any suggestions are welcome.
Thank you.
RyushokenRyushoken
1 Answer
Just in case this is still relevant:I've managed to at find a solution to your first question, as I was trying to build an Angular 4 frontend for a Spring Boot application and faced the exact same problem. Here is my webpack.config.js:
Thomas HöllThomas Höll
Not the answer you're looking for? Browse other questions tagged angularwebpack or ask your own question.
Posted by2 years ago
Archived
For whatever reason I can't fine any resources explaining how you go about running reactjs/webpack with pm2.
![History History](/uploads/1/2/5/7/125753637/503282554.png)
I did find https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04 that shows how to run a node app with pm2 and Nginx.
However what I got from this guide https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-serve-with-PM2 is that because I am using webpack to divvy up the files into the /dist folder I need to run the process on the whole folder. But the guide is for angular2 and webpack, so it may not be exactly right for what I need.
It says to run 'pm2 start http-server --name app -- dist -p 80', but I get the error 'script not found : /home/user/myproject/app/assets/http-server'
Also tried 'pm2 start dist', says it starts, but after checking the status/logs it gets the error 'Cannot find module '/home/user/myproject/app/assets/dist', which of course it makes sense, as it thinks I am trying to run a file, not a folder.
So can any one help? Am I going in the completely wrong direction?
Thanks.
EDIT: webpack base.config.js and prod.config.js below
5 comments