0

I have implemented CSS grid layout and CSS flexbox for styling website. I need to use PostCSS plugin autoprefixer to amend grid CSS styling so that it work in IE11 On official github link the documentation contains it's usage with webpack Autoprefixer webpack so

  1. do need to install webpack separately in my angular app. As I have read that angular CLI uses webpack under the hood.
  2. What is right way to use such plugins or laoders in angular app?

This post has explained that how can we use webpack in angular app. So if we need to use webpack separately in angular app configured with angular CLI then what is purpose of ng serve?

As per What happens when you run ng serve? it says that ng serve run webpack-dev-server so that means angular cli project already have webpack.config.js file. So if I add another webpack.config.js file would that be right?

my package.json scripts:

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "clean": "rimraf ./dist/",
    "build": "ng build --prod --build-optimizer --vendor-chunk --common-chunk",
    "serve:prod": "npm run clean && npm run build -- --env=prod && npm run server",
    "serve:stage": "npm run clean && npm run build -- --env=stage && npm run server",
    "analyze": "npm run clean && npm run build -- --stats-json --named-chunks && webpack-bundle-analyzer ./dist/stats.json",
    "server": "cd dist && http-server"
  },

Let me know if my Question is vague. Thanks.

Always_a_learner
  • 4,585
  • 13
  • 63
  • 112
  • I'm investigating this for a similar need, and thus far it seems like the only option is to eject from Angular CLI, because the [Angular CLI team has declared that they will not support external configuration of webpack](https://github.com/angular/angular-cli/issues/1656#issuecomment-249921747). Ejecting is not viable for me, but it might be for you. – asgallant Aug 09 '18 at 21:45
  • @asgallant Thanks for reading out my question. I also learned about ng-eject recently. Can you tell why it is not viable for you? Will it eliminate any basic features of CLI? Read few articles but still unclear that in what circumstances we should not use ng-eject. Thanks. – Always_a_learner Aug 10 '18 at 05:20
  • also I have noticed that autoprefixer is working in my project already where someone else has installed it's dependency. But I cannot see it in scripts command of package or angular CLI. I don't know how it is working. And the resource who has installed it is not available. So I am really confused that how did he configure it. – Always_a_learner Aug 10 '18 at 05:21
  • 1
    I'm leading a team of engineers who have never worked on front-end code before, and I don't want to complicate our configuration any more than it has to be. Angular CLI in an unejected state is simple. After doing more research, this might be possible with Angular 6. [Codeburst has an article](https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21) on using the [angular-cli-builders](https://github.com/meltedspark/angular-cli-builders) npm package to accomplish this. – asgallant Aug 10 '18 at 14:52

0 Answers0