N
N
Nikita Kit2018-06-04 14:07:47
gulp.js
Nikita Kit, 2018-06-04 14:07:47

How to bundle script with webpack with different request configs for dev and prod?

The situation is this:
While I am writing the front, before integration with the backend, I write links to requests statically, in the component, using the static server on the node (browserSync), I request the static data of the components. To integrate with the backlink, you need to change the links. If these links are changed manually, the front being developed in my working environment will stop working.
Therefore, I need to request different configs depending on the use of the --production flag.
My scripts are assembled by webpack, but the tasks are managed by gulp. In each task, args.production is passed as an argument, which can be true or false.
Googling about the webpack environment gets me a little off the mark.
In fact, I need to set a constant in the webpack config (ex. envConf) with the path to the config in its value, which will change depending on the use of the --production flag. That is, I write envConf imports to the client script, and instead webpack substitutes import 'conf/dev/envConf.js' or 'conf/prod/envConf.js'
Tell me where can I find information in the webpack docs about what I need. I've been looking for a long time and so far without success.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergiu Mitu, 2018-06-04
@ShadowOfCasper

you can run Webpack from Gulp, and pass the config you need to webpack through the usual if (args.production).

gulp.task('js', function (done) {
  gulp.src('entry file')
    .pipe(webpackStream(args.production ? webpackDevConfig : webpackProdConfig, webpack))
    .pipe(gulp.dest('dest path'));
  done();
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question