refactor webpack config

angular.json

@@ -18,7 +18,7 @@
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
-              "path": "./webpack/webpack.common.ts",
+              "path": "./webpack/webpack.browser.ts",
               "mergeStrategies": {
                 "loaders": "prepend"
               }
@@ -30,7 +30,8 @@
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/robots.txt"
             ],
             "styles": [
               "src/styles.scss"
@@ -84,7 +85,7 @@
           "builder": "@angular-builders/custom-webpack:karma",
           "options": {
             "customWebpackConfig": {
-              "path": "./webpack/webpack.common.ts",
+              "path": "./webpack/webpack.test.ts",
               "mergeStrategies": {
                 "loaders": "prepend"
               }

webpack.config.ts

@@ -1,45 +0,0 @@
-const webpackMerge = require('webpack-merge');
-
-const prodPartial = require('./webpack/webpack.prod');
-
-module.exports = (env, options) => {
-  env = env || {};
-  const commonPartial = require('./webpack/webpack.common')(env);
-  const clientPartial = require('./webpack/webpack.client')(env);
-  const { getAotPlugin } = require('./webpack/webpack.aot')(env);
-  const { getServerWebpackPartial } = require('./webpack/webpack.server')(env);
-
-  if (env.aot) {
-    console.log(`Running build for ${env.client ? 'client' : 'server'} with AoT Compilation`);
-  }
-
-  const serverPartial = getServerWebpackPartial(env.aot);
-
-  let serverConfig = webpackMerge({}, commonPartial, serverPartial, {
-    plugins: [
-      getAotPlugin('server', !!env.aot)
-    ]
-  });
-
-  let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
-    plugins: [
-      getAotPlugin('client', !!env.aot)
-    ]
-  });
-  if (options.mode === 'production') {
-    serverConfig = webpackMerge({}, serverConfig, prodPartial);
-    clientConfig = webpackMerge({}, clientConfig, prodPartial);
-  }
-
-  const configs = [];
-
-  if (!env.aot) {
-    configs.push(clientConfig, serverConfig);
-  } else if (env.client) {
-    configs.push(clientConfig);
-  } else if (env.server) {
-    configs.push(serverConfig);
-  }
-
-  return configs;
-};

webpack/webpack.browser.ts

@@ -0,0 +1,8 @@
+import { commonExports } from './webpack.common';
+
+module.exports = Object.assign({}, commonExports, {
+  target: 'web',
+  node: {
+    module: 'empty'
+  }
+});

webpack/webpack.common.ts

@@ -21,11 +21,9 @@ export const copyWebpackOptions = [
   }, {
     from: path.join(__dirname, '..', 'src', 'assets', 'i18n'),
     to: path.join('assets', 'i18n')
-  }
 ];
 
 export const commonExports = {
-  target: 'web',
   plugins: [
     new CopyWebpackPlugin(copyWebpackOptions),
     new HtmlWebpackPlugin({
@@ -37,9 +35,6 @@ export const commonExports = {
       defaultAttribute: 'defer'
     })
   ],
-  node: {
-    module: 'empty'
-  },
   module: {
     rules: [
       {
@@ -99,5 +94,3 @@ export const commonExports = {
     ],
   }
 };
-
-module.exports = commonExports;

webpack/webpack.prod.ts

@@ -1,48 +1,12 @@
+import { commonExports } from './webpack.common';
+import { buildRoot, projectRoot } from './helpers';
+
 const webpack = require('webpack');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const CompressionPlugin = require('compression-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const cssnano = require('cssnano');
 const nodeExternals = require('webpack-node-externals');
 
-import { buildRoot, globalCSSImports, projectRoot, theme, themedTest, themedUse, themePath } from './helpers';
+module.exports = Object.assign({}, commonExports, {
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const path = require('path');
-const fs = require('fs');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
-
-export const copyWebpackOptions = [
-  {
-    from: path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-    to: path.join('assets', 'fonts'),
-    force: undefined
-  },
-  {
-    from: path.join(__dirname, '..', 'src', 'assets', 'fonts'),
-    to: path.join('assets', 'fonts')
-  }, {
-    from: path.join(__dirname, '..', 'src', 'assets', 'images'),
-    to: path.join('assets', 'images')
-  }, {
-    from: path.join(__dirname, '..', 'src', 'assets', 'i18n'),
-    to: path.join('assets', 'i18n')
-  }
-];
-
-export const commonExports = {
   plugins: [
-    new CopyWebpackPlugin(copyWebpackOptions),
+    ...commonExports.plugins,
-    new HtmlWebpackPlugin({
-      template: buildRoot('./index.html', ),
-      output: projectRoot('dist'),
-      inject: 'head'
-    }),
-    new ScriptExtPlugin({
-      defaultAttribute: 'defer'
-    }),
     new webpack.EnvironmentPlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production'),
@@ -50,64 +14,6 @@ export const commonExports = {
       }
     }),
   ],
-  module: {
-    rules: [
-      {
-        test: (filePath) => themedTest(filePath, 'scss'),
-        use: (info) => themedUse(info.resource, 'scss')
-      },
-      {
-        test: (filePath) => themedTest(filePath, 'html'),
-        use: (info) => themedUse(info.resource, 'html')
-      },
-      {
-        test: /\.ts$/,
-        loader: '@ngtools/webpack'
-      },
-      {
-        test: /\.scss$/,
-        exclude: [
-          /node_modules/,
-          buildRoot('styles/_exposed_variables.scss'),
-          buildRoot('styles/_variables.scss')
-        ],
-        use: [
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-              includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
-            }
-          },
-          {
-            loader: 'sass-resources-loader',
-            options: {
-              resources: globalCSSImports()
-            },
-          }
-        ]
-      },
-      {
-        test: /(_exposed)?_variables.scss$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-              includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
-            }
-          }
-        ]
-      },
-    ],
-  },
   mode: 'production',
   recordsOutputPath: projectRoot('webpack.records.json'),
   entry: buildRoot('./main.server.ts'),
@@ -122,6 +28,4 @@ export const commonExports = {
       /sortablejs/,
       /ngx/]
   })],
-};
+});
-
-module.exports = commonExports;

webpack/webpack.test.ts

@@ -0,0 +1,8 @@
+import { commonExports } from './webpack.common';
+
+module.exports = Object.assign({}, commonExports, {
+  target: 'web',
+  node: {
+    module: 'empty'
+  }
+});