Pass variable from webpack entries

Question

I have multiple entries like in webpack docs

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

let's say every of these files (index.js) is the same and only thing that change is other routes import.

I would create one file to keep DRY principle but I would need to pass something to actually know which router I want to import.

For example pageOne/index.js is

import Vue from 'vue'
import axios from 'axios'
import App from '../App'
import { store } from '../store';
import VueProgressBar from 'vue-progressbar'
import Router from '../routers/router';
import interceptor from '../../config/httpInterceptor.js';

console.log('in main', window.location.href)

const routerInstance = new Router('main');
routerInstance.createRouter()
    .then(router => {
        interceptor();

        if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
        Vue.http = Vue.prototype.$http = axios;
        Vue.config.productionTip = false;
        Vue.use(VueProgressBar, {
            color: 'rgb(255, 85, 0)', failedColor: 'red', thickness: '5px'
        });

        new Vue({
            components: { App },
            router,
            store,
            template: '<App/>'
        }).$mount('#app');
    });

and in pageTwo/index.js only line that change is from

const routerInstance = new Router('main');

to

const routerInstance = new Router('second');

so it's bad to have three same js files where only one line is changing but I don't know how to refactor it so it's reusable. I would need to pass to file information about which page is being loaded for example it would be something like this

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js?page=main',

but now when in index.js I log

console.log('in main', window.location.href)

it is

http://localhost:9080/#/

So I'm not able to require different router basing on this. I need some other solution.

Edit

@Daniel Lizik in comment section suggested to use environment variable. He also said to use webpack config in order to set it. Considering that I would refactor my entry object to following:

module.exports = {
  entry: {
    pageOne: './src/index.js',
    pageTwo: './src/index.js',
    pageThree: './src/index.js'
  }
};

I would need to configure webpack somehow to set environment variable right after webpack imported file.

Webpack probably loop over this object and import files. Right after it read this line

pageOne: './src/index.js',

I would need to set some env variable to 'pageOne' so when index.js is executed it can check this variable and import correct router.

However I have no idea how I could achieve that.

use environment variables. latest create react app has what was once typically done with webpack stringify plugin built in, but you must prefix the variable with `REACT_APP_` https://create-react-app.dev/docs/adding-custom-environment-variables/ — Daniel Lizik, Oct 31 '19 at 05:28
Right. I use vue... but look I have only my entry point list. In order to set env variable to current window I would need to know exact place where webpack is executing `import` and after each import I would need to change env variable to next window name. So every window receive correct router. — BT101, Oct 31 '19 at 05:40
please read rest of the comment, "i use vue" was only side note — BT101, Oct 31 '19 at 05:47
My point is that I don't know where and especially **when** to set environment variable — BT101, Oct 31 '19 at 05:49
you don't set environment variables in application code. you set it in your webpack config, or CI, or something. — Daniel Lizik, Oct 31 '19 at 05:59
Does this answer your question? [Passing environment-dependent variables in webpack](https://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack) — Daniel Lizik, Oct 31 '19 at 06:14
Not really. It shows how to set env variable with webpack but not how to change it with every further import. Beside now when I think about it I'm not even certain if it will work anyway as webpack might import everything before index.js start to execute therfore in index.js when importing router I would have env variable with value of `pageThree` — BT101, Oct 31 '19 at 06:30
why would you want to change an env var? just do `{ page1: 'foo', page2: 'bar', page3: 'fizz' }` — Daniel Lizik, Oct 31 '19 at 06:32
And what I'll achieve by setting such env var? How I'll be aware which router to import basing on this env var? — BT101, Oct 31 '19 at 06:41

score -1 · Answer 1 · answered Oct 31 '19 at 05:20

You don't need to pass the query param in the entry point configuration. You have to pass it from the browser. Then you can parse the query param and pass it to new Router(). You can use urijs node module for parsing the query param in a clean way.

import URI from "urijs";
...
const uriObj = new URI(url);
const page = uriObj.query(true)[page] || "main";
const routerInstance = new Router(page);

In your browser you enter the url with the page param like http://localhost:9080/page=second

I don't use normal browser. It's electron app and I can't "enter the url". How would my entry point look then? — BT101, Oct 31 '19 at 05:25

Pass variable from webpack entries

1 Answers1