CODEWITHSUNDEEP
javascriptnpmwebpackbundlebundler
Iga
Iga

Reputation: 333

How to organize npm scripts and several webpack configs?

I have several dashboards in project and I decided to make separate scripts in package.json for each(in development it's not very useful to build all dashboards when you work only with one. It takes more time). First I found that via script is possible to launch concrete webpack config.So it will look like:

"scripts": {
    "dash1": "export NODE_ENV=development && webpack --config=webpack.dash1.config.js  -d --watch --display-error-details export name=employee ",
    "dash2": "export NODE_ENV=production && webpack --config=webpack.dash2.config.js --progress",
    "dash3": "export NODE_ENV=development && webpack --config=webpack.dash3.config.js -d --watch --display-error-details",
}

In this case I will need to have 3 separate webpack config-files, where I'll specify proper entry files. But Is it possible somehow to pass the parameter in npm script and to check it in webpack config? Maybe it's possible to perform conditional check for entries according to trnasmitted from npm-script param?

Upvotes: 1

Views: 405

Answers (1)

madflow
madflow

Reputation: 8510

Webpack config files are just javascript - so anything goes. In your case you could

  1. use environment variables

https://webpack.js.org/guides/environment-variables/

NODE_ENV=development DASHBOARD=dash1 webpack --config=webpack.config.js

(p.s. you do not need export blah &&)

  1. use a base config and a configuration for each dashboard which extends this configuration
config
├── base.config.js
├── dash1.config.js // extends base.config.js
└── dash2.config.js

and use a tool like https://github.com/survivejs/webpack-merge to help with merging the base configuration.

Upvotes: 1

Related Questions