Help to migrate from Rollup to Webpack


#1

We are using latest app scripts but still with rollup. Since we are seeing SASS / CSS display bugs after the LTR Update came out (maybe root cause / maybe not, only god knows), I want to migrate our project to Webpack, away from rollup.

How would you migrate this file:

“rollup.config.js”:


var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
var globals = require('rollup-plugin-node-globals');
var builtins = require('rollup-plugin-node-builtins');
var json = require('rollup-plugin-json');
var replace = require('rollup-plugin-replace');
var rollup = require('./../node_modules/@ionic/app-scripts/config/rollup.config');
var themes = require('../src/shared/theme/theme.config');
var environment = require('../src/environments/environment');
var child_process = require('child_process');

// theme setup
var current_theme = process.env["THEME"] || themes.ThemeConfig.default_theme;
var all_themes = themes.ThemeConfig.all_themes;

if (all_themes.indexOf(current_theme) === -1) {
    console.log('Rollup - Theme could not be found: ' + current_theme + '. Existing themes: ' + all_themes.join(", ") + '.');
} else if (process.env["THEME"] === undefined) {
    console.log('Rollup - THEME environment variable missing. Using default theme: ' + current_theme + '.');
} else {
    console.log('Rollup - Current theme: ' + current_theme + '.');
}


// environment setup

var gitAuthor = child_process.execSync('git log -1 --pretty=format:"%an"').toString().trim();
var gitSha = child_process.execSync('git rev-parse --short HEAD').toString().trim();
var gitTag = child_process.execSync('git describe --tags --abbrev=0').toString().trim();
var gitDate = child_process.execSync('git log -1 --date=local --format=%cd').toString().trim();
var gitBranch = child_process.execSync('git rev-parse --abbrev-ref HEAD').toString().trim();

var bbBuild = process.env["BUDDYBUILD_BUILD_NUMBER"] || "0";
var debugMode = process.env["DEBUG"] || "0";

var current_environment = process.env["BUDDYBUILD_BRANCH"] || gitBranch;
var all_environments = environment.environment_keys;

if (all_environments.indexOf(current_environment) === -1) {
    console.log("Rollup - Environment '" + current_environment + "' could not be found. Using default environment: " + environment.default_environment + ". Existing Environments: " + all_environments.join(", ") + ".");
    current_environment = environment.default_environment;
} else {
    console.log('Rollup - Current environment: ' + current_environment + '.');
}

rollup.plugins = [
    replace({
        values: {
            "{{THEME_PLACEHOLDER}}": current_theme,
            "{{ENVIRONMENT_PLACEHOLDER}}": current_environment,
            "{{DEBUG_PLACEHOLDER}}": debugMode,
            "{{BB_BUILD_PLACEHOLDER}}": bbBuild,
            "{{GIT_AUTHOR_PLACEHOLDER}}": gitAuthor || "none",
            "{{GIT_HASH_PLACEHOLDER}}": gitSha || "none",
            "{{GIT_TAG_PLACEHOLDER}}": gitTag || "none",
            "{{GIT_DATE_PLACEHOLDER}}": gitDate || "none",
            "{{GIT_BRANCH_PLACEHOLDER}}": gitBranch || process.env["BUDDYBUILD_BRANCH"] || "none",
            "{{EASTER_EGG_PLACEHOLDER}}": "none"
        },
        include: ['src/environments/environment.js', 'src/shared/theme/theme.config.js'],
        exclude: 'node_modules/**'
    }),
    builtins(),
    commonjs({
        namedExports: {
            // js-base64
            'node_modules/js-base64/base64.js': ['Base64']
        }
    }),
    nodeResolve({
        module: true,
        jsnext: true,
        main: true,
        browser: true,
        extensions: ['.js']
    }),
    globals(),
    json()
];


if (process.env.IONIC_ENV === 'prod') {
     rollup.entry = '{{TMP}}/app/main.ts';
     rollup.sourceMap = false;
}



module.exports = rollup;

tsconfig.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "declaration": false,
        "noImplicitReturns": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
				 "dom",
				 "es2015"
			   ],
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "target": "es5"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.spec.ts",
        "node_modules/@types"
    ],
    "compileOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}
```