Solved-Enough: How to access src/environment.js from webpack.config.js


#1

When using the latest CLI and webpack an environment.js file gets written to my src folder containing whatever I add to the project environments files. That’s great as it stands, but now I need to use some of those values within the webpack.config.js scripts

I do not want to pass everything to the CLI via cmdLine options, there are quite a few more than these that I need to use – I am trying to generate differently skinned apps based on which --env file name I pass to the CLI

For Example, what do I need to do to use environment values that I have added (title, baseURL, & client) within the primary config?

// primary config:
const title = 'environment.title;
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = environment.baseUrl + '-' + environment.client;

#2

This is a semi-solution so far, but it satisfies my immediate need – to construct title and baseUrl from a given client.

I will not be able to pull in the proper ./src/environment.js and pass it to webpackConfig() - because that file is written after the webpackConfig() is executed.

In my build.js I do the work I need to do to craft my title and baseUrl and then pass them into the webpackConfig() call

// setup our title and baseUrl for webpack
const defaultClient = 'FS';
const client = CLIOptions.getFlagValue('client') || defaultClient;
const title = `${client} enrollment`;
const baseUrl = (production) ? `/enrollment-${client}` : '/';

const config = webpackConfig({
  production, server, extractCss, coverage, title, baseUrl
});

Then in my webpack.config.js I comment out the given title & baseUrl to satisfy eslint and add the title and baseUrl to the given parameters

// primary config:
// const title = ''; // see below
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
// const baseUrl = '/'; // see below

const cssRules = [
  { loader: 'css-loader' },
];

// build.js is passing in title & baseUrl via webpackConfig() so we comment them out above
module.exports = ({ production, server, extractCss, coverage, title, baseUrl } = {}) => ({
[...]
});