Thanks Chris Bongers! Means a lot! Would appreciate sharing for better reach :-)

Thanks Rutik! I'm glad you found it useful. Do share the article for better reach!!

Hi Dinys Monvoisin,

Thank you for taking the time to read the article. I'm glad you found it easy to read and that was my intent considering I'm a newbie in the JS world myself.

Now, let us look at each of your question:

Ques 1. What do webpack and webpack-cli are and use for?

Answer: I went through the Webpack's npm documentation provided over here.

Likewise, there's the npm package manager documentation provided over here.

I would like to think of Webpack doing the work of locating the entry point, applying the transformations and building the distribution bundle etc. after reading the information from the webpack.config.js.

Webpack-cli on the other hand is more of a helper package that can help you get setup with the configuration in a much faster manner and also enable supporting the command line interface commands to run the webpack server.

Ques 2. Is --save-dev still required when doing npm start?

Answer: No. It is not required. When we specify the command --save-dev, during npm install, it basically tells that the module should be included or referenced by the project only during development and when you run a npm run build, these modules will not be copied over to the node_modules folder within the 'dist' package.

Ques 3. What do you mean by MiniCssExtractPlugin completely separate the CSS file?

Answer: If you head over to my gitrepo that I had specified within the project and set it up locally, you'll be able to understand this better.

But, basically, rather than injecting the style inside the HTML. It creates a 'main.css' file within the 'dist' folder and a link tag is added to the index.html to reference it. I'm positive, if you try out my Github project setup locally and do a npm run build (after npm install) you'll be able to get this part.

Lastly, I have updated the link to reference to the plugins list. Thanks for bringing it to my notice.

Appreciate your questions. It also helps me dig deep and explore. But, anytime you have questions, for example, why is a certain package used, I'll only advise you to refer to the npm package documentation.

Honestly, in my humble opinion, there's just so so much information available and packing all of that in an article is simply not possible. Having said that, I appreciate your questions. I'm hoping it'll help others as well.

Cheers!!

Hi Skay,

Thank you for taking the time to provide a detailed answer to my questions.

I understand it now for the MiniCssExtractPlugin, it is actually creating an external file rather than embedding the CSS to the HTML file.

You are welcome. Do share for maximum reach 😎

Thanks Bolaji..