Ionic-app-scripts: Custom webpack file being ignored in app-scripts v.3.0.0

[thomas-adriano]

When using a custom webpack config file (ionic_webpack config property), altough the config file is loaded (any console log put there is printed), no plugin is execute. I didn't test any loader, so it might or might not have this same problem.
As the webpack config code below demonstrates, I have only two plugins: CopyWebpackPlugin and webpack.DefinePlugin. Neither the copy plugin or the define plugin behaviour is reflected in the source files.

What behavior are you expecting? I expect that any custom webpack file is coherently executed.

Steps to reproduce:

1. @ionic/app-scripts version 3.0.0
2. provide a custom webpack config with one or more plugins (CopyWebpackPlugin or webpack.DefinePlugin, to be more aligned with this situation) through package.json' ionic_webpack config property
3. see that no plugin is executed

const defaultWebpackConfig = require("./node_modules/@ionic/app-scripts/config/webpack.config.js");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const DEV_ENV = process.env.IONIC_ENV === "dev";

let defaultConfig = {};
if (DEV_ENV) {
    defaultConfig = defaultWebpackConfig.dev;
} else {
    defaultConfig = defaultWebpackConfig.prod;
}

const config = merge(defaultConfig, {
    plugins: plugins(),
    node: {
        dns: "mock",
        net: "mock"
    }
});

function plugins() {
    let res = [];
    //commons plugins
    res.push(
        new CopyWebpackPlugin([
            { from: path.resolve("./libs/"), to: path.resolve("./www/libs") }
        ])
    );

    if (DEV_ENV) {
        //dev plugins
        res.push(
            new webpack.DefinePlugin({
                API_URL: JSON.stringify(
                    "SOMEURL"
                ),
                API_SAM: JSON.stringify(
                    "SOMEURL"
                )
            })
        );
    } else {
        //prod plugins
        res.push(
            new webpack.DefinePlugin({
                API_URL: JSON.stringify(
                    "SOMEURL"
                ),
                API_SAM: JSON.stringify(
                    "SOMEURL"
                )
            })
        );
    }
    return res;
}

module.exports = config;

@ionic/app-scripts version 3.0.0

Other information: version 2.1.4 and below don't present this behavior

[natemoo-re]

This is a known breaking change, as mentioned in the CHANGELOG for 3.0.0.
Unfortunately, it fails silently and IMO wasn't explained very clearly. Luckily, it's an easy fix.

You likely noticed, but the _default_ webpack.config.js now exports an object with two configs instead of just one. See config/webpack.config.js. It looks like this:

module.exports = { 
    dev: devConfig, 
    prod: prodConfig
}

Your _custom_ webpack.config.js needs to use the same structure – exporting an object with a dev and prod config. App Scripts automatically uses the correct one.

---

In your specific use case, the _quick and dirty_ option is to change module.exports like so:

module.exports = { 
    dev: config, 
    prod: config
}

But since the plugins() function essentially just checks which environment is being used, you could eliminate some unnecessary logic (like manually checking process.env.IONIC_ENV.) Here's a truncated example:

const devConfig = merge(defaultWebpackConfig.dev, {
    plugins: [
        ...CommonsPlugins,
        ...DevPlugins
    ],
    node: {
        dns: "mock",
        net: "mock"
    }
});
const prodConfig = merge(defaultWebpackConfig.prod, {
    plugins: [
        ...CommonsPlugins,
        ...ProdPlugins
    ],
    node: {
        dns: "mock",
        net: "mock"
    }
});


module.exports = {
    dev: devConfig,
    prod: prodConfig
}

[thomas-adriano]

@natemoo-re thank you! You were very helpful. Next time I'll pay more attention to the changelog.

[rafbgarcia]

Hi, sorry if this is not the correct place but I thought it'd make sense to ask in here.

I'm trying to have an alias for my api host configuration for dev and prod.

I copied the default app-scripts/config/webpack.config.js file and added the section

resolver {
    alias: {
      "config": path.resolve("src/app/config/dev"),
    },
...

for devConfig and prodConfig, but I get the following error:

➜  imoto-motoboys git:(master) ✗ ionic build
Running app-scripts build:
[07:31:54]  build dev started ...
[07:31:54]  clean started ...
[07:31:54]  clean finished in 2 ms
[07:31:54]  copy started ...
[07:31:54]  deeplinks started ...
[07:31:54]  deeplinks finished in 45 ms
[07:31:54]  transpile started ...
[07:31:58]  typescript: src/app/app.module.ts, line: 28
            Cannot find module 'config/prod'.

      L28:  import { config } from 'config/prod'

Am I missing something?

Thank you!

[ryanricig]

Hey @rafbgarcia - did you ever sort out the env config alias situation?

[Muqluk]

Hey @rafbgarcia - did you ever sort out the env config alias situation?

Inquiring minds want to know!

[rafbgarcia]

I don't remember :) Sorry y'all.