1

From their website we pack is defined as:

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

My confusion starts from this answer. It describes webpack-dev-server as :

Webpack Dev Server is itself an express server which uses webpack-dev-middleware to serve the latest bundle and additionally handles hot module replacement (HMR) requests for live module updates in the client.

Is webpack being used to ‘compile’ express or is it a way to tell express there are changes in the front end?

My confusion even gets deeper when I look at this project and (according to their package.json file) they have used webpack-dev-server but I cannot see any webpack installed.What is going on? Can you use webpack dev server without Webpack ?

And finally my last question does angular came with webpack inside it or do you need to install it to use it?

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
YulePale
  • 6,688
  • 16
  • 46
  • 95

2 Answers2

1

First webpack is a compiler not a library as a moment. It means it compiles different pieces into one js file (I am oversimplifying now in order to explain). After compilation you may use that file however you want.

Webpack Dev Server is an additional tool. It allows to work with webpack easier. What it does is it after webpack compilation it lunches localhost server (using express) with your bundled code. Also you may add hot module replacement (HMR). That piece will update your bundle on the fly without rebulding entire bundle (it will be much faster).

About example with "no webpack": they use angular-devkit/build-angular it is another tool for lazy developers that want's ruin project right at the beginning because they don't want spent 3 hours learning webpack. They don't have webpack as dependencies because angular-devkit/build-angular has it.

And finally my last question does angular came with webpack inside it or do you need to install it to use it? - you need to install angular by yourself.

Arseniy-II
  • 8,323
  • 5
  • 24
  • 49
  • What do you mean by ruining the project ... why is it better to install webpack by yourself? And not use the one within angular? – YulePale May 13 '19 at 12:55
  • 1
    I am not very familliar with angular. I hope there is a way to use pure webpack. Why it is better? I see you have asked that question above "Is it possible to configure css pre-processors from the webpack that comes with angular?". If you use pure webpack. You think not about "Is it possible to configure " but about "how should I configure". Pure webpack has tremendous amount of uses and possibilities. All tools that "simplifies" webpack prevent you from using most of webpack possibilities. – Arseniy-II May 13 '19 at 13:08
  • 1
    Also pure webpack has better support and it is easier to find answers for questions: "why is something not working" or "how I can do my super cool crazy idea" – Arseniy-II May 13 '19 at 13:12
  • 1
    I have just checked there are ways to use pure webpack with angular. Thanks a lot. – YulePale May 13 '19 at 13:15
  • 1
    Awesome! Wish you luck. BTW check [sass-resources-loader](https://github.com/shakacode/sass-resources-loader). It helps a lot with sass files. – Arseniy-II May 13 '19 at 13:15
1

Is webpack being used to ‘compile’ express or is it a way to tell express there are changes in the front end ?

When there is a change in front end code webpack dev server will listen on that change and reload your content

What is going on? Can you use webpack dev server without Webpack ?

Webpack-dev-server is depend on webpack so when you install webpack-dev-server npm will install webpack also

angular came with webpack inside it or do you need to install it to use it?

angular cli does come with webpack and you dont need to install webpack to use it because the webpack config file for angular cli it's hidden from the user

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60