Skip to content

Instantly share code, notes, and snippets.

@selahattinunlu
Last active July 13, 2018 20:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save selahattinunlu/d19d69a5cd4b9ba6e0f76f26babba70d to your computer and use it in GitHub Desktop.
Save selahattinunlu/d19d69a5cd4b9ba6e0f76f26babba70d to your computer and use it in GitHub Desktop.
example for extend ionic/app-scripts/config/webpack.config.js
// don't forget to install "lodash" "dotenv"
var ionicWebpackConfig = require('@ionic/app-scripts/config/webpack.config.js');
var webpack = require('webpack');
var _ = require('lodash');
var dotenvConfig = require('dotenv').config();
var dev = ionicWebpackConfig.dev;
var prod = ionicWebpackConfig.prod;
var loadProcessEnvValues = function() {
return new webpack.DefinePlugin({
'process.env': _(process.env)
.pick(_.keys(dotenvConfig.parsed))
.mapValues((v) => (JSON.stringify(v)))
.value()
});
};
dev.plugins.push(loadProcessEnvValues());
prod.plugins.push(loadProcessEnvValues());
module.exports = {
dev: dev,
prod: prod
}
@bennyng
Copy link

bennyng commented Jul 11, 2018

cool, thanks for this.

As a reference after adapted the gist
(we use awesome-typescript-loader as TS loader)

var webpack = require("webpack");
var dotenvConfig = require("dotenv").config().parsed;
var _ = require("lodash");
var TsConfigPathsPlugin = require("awesome-typescript-loader")
  .TsConfigPathsPlugin;

var ionicWebpackConfig = require("@ionic/app-scripts/config/webpack.config.js");
var dev = ionicWebpackConfig.dev;
var prod = ionicWebpackConfig.prod;

var processEnv = {
  "process.env": _(process.env)
    .pick(_.union(_.keys(dotenvConfig), ["IONIC_ENV"]))
    .mapValues(v => JSON.stringify(v))
    .value()
};

var createDotEnvPlugin = function() {
  return new webpack.DefinePlugin(processEnv);
};
var createTsConfigPathsPlugin = function() {
  return new TsConfigPathsPlugin({
    configFilePath: "..",
    compiler: "typescript"
  });
};

dev.plugins.unshift(createDotEnvPlugin());
dev.resolve.plugins = [createTsConfigPathsPlugin()];

prod.plugins.unshift(createDotEnvPlugin());
prod.resolve.plugins = [createTsConfigPathsPlugin()];

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

@selahattinunlu
Copy link
Author

Cool, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment