webpack task should be able to pass populated constants to webpack.config.js

[jagged3dge]

Thanks for making this lovely generator 👍

I am trying to use the same service base with my web and an ionic/cordova mobile app. To that end, I generated a new target using yo mcfly:target mobile --mobile which created a new index-mobile.html file in the client folder.

Now when I'm building the mobile target, I find that it's using the other index.html file instead of starting off of index-mobile.html. Is this by design? If so, what do I need to change to make it automatically use the index-{{targetSuffix}}.html file instead of the original index.html.

[Joshua Skrzypek]

Where are you seeing that it's using the base index.html?

If you mean inside your dist/mobile/ folder, it's just that it's getting renamed to index.html from index-mobile.html by the dist gulp task. Make a change like adding a comment or an inline style tag to change the body's background color to your client/index-mobile.html and then run gulp browsersync and see if it shows up.

[jagged3dge]

Thanks for the quick reply.

That's almost what I did. I added a simple div that differentiates the sources of the html files. It seems to me the mobile app dist task is copying over the main index.html file, instead of the one with the suffix

[Joshua Skrzypek]

Ok I took a look & tested it and everything looks just fine, but I think I figured out your issue... are you specifying your mobile target when you run gulp browsersync? For the main target you can leave the -t flag blank, but for others you'll need to add the targetname. In your case run gulp browsersync -t mobile.

The reason for this is that the gulp tasks are either able to run for multiple targets (all at once or a selected subset) or only for one at a time. dist can run for all targets at once, but browsersync will only run for one. All of the tasks that are depended upon by the one you call end up deferring to the specific target list chosen by the task named on the command line.

[jagged3dge]

I went through the process again, and I figured out my issue. I apologise for jumping the gun, since it seems the issue lies with my webpack config. I'm using HtmlWebpackPlugin to replace the bundle.js tag with app.js and vendor.js chunks. Here's how I set it up for a single target:

plugins: [
...
new HtmlWebpackPlugin({
      filename: '../index.html',
      template: './client/index.html',
      // template: constants.html.src, // I want to use this, but it doesn't interpolate `targetSuffix` template
      chunks: [
        'init',
        'vendor',
        'app'
      ]
    })
]

Could you help me with a way to set up the template property in the above config block that would properly point to whichever mcfly target I specify when running gulp dist -t {{target}}?

[Joshua Skrzypek]

Yup you caught something: there's an issue with how we currently use webpack.config.js in the webpack task. We don't currently have a way of passing the constants to the config so the target and mode can be consumed.

[Joshua Skrzypek]

You'll need to jerry-rig a fix on your side until we finalize what we want to do with this. Fortunately it'll be pretty simple. Specific instructions to follow.

[Joshua Skrzypek]

In your gulp_tasks/tasks/webpack.js add this line in the webpackShare() function (should be around line 25):

var webpackShare = function(shouldWatch, constants, done) {
    var version = helper.readJsonFile('./package.json').version;
    var dest = constants.dist.distFolder;
    dest = helper.isMobile(constants) ? dest + '/www/' + constants.script.dest : dest + '/' + constants.script.dest;
    var mode = constants.mode;
    var target = constants.targetName;
    var bundleName = constants.bundleName || 'bundle.js';
    var releaseName = target + '-v' + version;
    var sourceMap = releaseName + constants.exorcist.mapExtension;
    webpackConfig = webpackConfig(constants); // ADD THIS LINE

    //webpackConfig.entry = ['babel/polyfill', constants.webpack.src];
    ...

[Joshua Skrzypek]

Then in your webpack.config.js just make the following change to your module.exports to consume the passed constants and return the result:

'use strict';

var path = require('path');
var webpack = require('webpack');
var helper = require('./gulp_tasks/common/helper');

module.exports = function(constants) {
    return {
        cache: true,
        ... config stuff that can use constants if needed ...,
        plugins: [
            ...,
            new HtmlWebpackPlugin({
                filename: '../index.html',
                template: './client/index.html',
                template: constants.html.src,
                chunks: [
                    'init',
                    'vendor',
                    'app'
                ]
            }),
        ]
    };
};

[Joshua Skrzypek]

This might not be the final format that we adopt, but it should get you working in the meantime.

[Joshua Skrzypek]

@jagged3dge Please let me know if this worked for you

[jagged3dge]

Yep, that works 👍