refactor(config): change how webpack config works to make it easier to support multiple environments

Author: danbucholtz

config/webpack.config.dev.js

@@ -1,11 +1,63 @@
+/*
+ * The webpack config exports an object that has a valid webpack configuration
+ * For each environment name. By default, there are two Ionic environments:
+ * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
+ * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
+ * For details on configuring webpack, see their documentation here
+ * https://webpack.js.org/configuration/
+ */
+
 var path = require('path');
 var webpack = require('webpack');
 var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
 
 var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
 var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
 
-module.exports = {
+
+var devConfig = {
+  entry: process.env.IONIC_APP_ENTRY_POINT,
+  output: {
+    path: '{{BUILD}}',
+    publicPath: 'build/',
+    filename: '[name].js',
+    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
+  },
+  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
+
+  resolve: {
+    extensions: ['.ts', '.js', '.json'],
+    modules: [path.resolve('node_modules')]
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.ts$/,
+        loader: process.env.IONIC_WEBPACK_LOADER
+      }
+    ]
+  },
+
+  plugins: [
+    ionicWebpackFactory.getIonicEnvironmentPlugin(),
+    ionicWebpackFactory.getCommonChunksPlugin()
+  ],
+
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
+};
+
+var prodConfig = {
   entry: process.env.IONIC_APP_ENTRY_POINT,
   output: {
     path: '{{BUILD}}',
@@ -77,4 +129,11 @@ module.exports = {
     net: 'empty',
     tls: 'empty'
   }
-};
+};
+
+
+module.exports = {
+  dev: devConfig,
+  prod: prodConfig
+}
+

config/webpack.config.prod.js renamed to config/webpack.config.js

@@ -205,18 +205,20 @@ function startWebpackWatch(context: BuildContext, config: WebpackConfig) {
 
 export function getWebpackConfig(context: BuildContext, configFile: string): WebpackConfig {
   configFile = getUserConfigFile(context, taskInfo, configFile);
-  const webpackConfig: WebpackConfig = fillConfigDefaults(configFile, getDefaultConfigFileName(context));
+  const webpackConfigDictionary = fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
+  const webpackConfig: WebpackConfig = getWebpackConfigFromDictionary(context, webpackConfigDictionary);
   webpackConfig.entry = replacePathVars(context, webpackConfig.entry);
   webpackConfig.output.path = replacePathVars(context, webpackConfig.output.path);
 
   return webpackConfig;
 }
 
-export function getDefaultConfigFileName(context: BuildContext) {
+export function getWebpackConfigFromDictionary(context: BuildContext, webpackConfigDictionary: any): WebpackConfig {
+  // todo, support more ENV here
   if (context.runAot) {
-    return taskInfo.defaultConfigFile + '.prod';
+    return webpackConfigDictionary['prod'];
   }
-  return taskInfo.defaultConfigFile + '.dev';
+  return webpackConfigDictionary['dev'];
 }