refactor(webpack): refactor webpack configuration

Author: jkuri

package.json

@@ -60,9 +60,6 @@
     "@types/express": "^4.0.35",
     "@types/jasmine": "^2.5.47",
     "@types/node": "^7.0.14",
-    "add-asset-html-webpack-plugin": "^2.0.1",
-    "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^3.1.3",
     "codelyzer": "^3.0.1",
     "compression-webpack-plugin": "^0.4.0",
     "copy-webpack-plugin": "^4.0.1",

src/tsconfig.server.json

@@ -10,5 +10,8 @@
     "excludes": [],
     "genDir": "ngfactory",
     "entryModule": "./app/server-app.module#ServerAppModule"
+  },
+  "awesomeTypescriptLoaderOptions": {
+    "silent": true
   }
 }

webpack.config.js

@@ -1,53 +1,104 @@
-const ngtools = require('@ngtools/webpack');
+const { resolve } = require('path');
+const AoTPlugin = require('@ngtools/webpack').AotPlugin;
 const webpackMerge = require('webpack-merge');
-const commonPartial = require('./webpack/webpack.common');
-const clientPartial = require('./webpack/webpack.client');
-const serverPartial = require('./webpack/webpack.server');
-const prodPartial = require('./webpack/webpack.prod');
-const devPartial = require('./webpack/webpack.dev');
-const { getAotPlugin } = require('./webpack/webpack.aot');
-const { root } = require('./webpack/helpers');
-const { getDevStylesConfig, getProdStylesConfig } = require('./webpack/webpack.style');
+const compression = require('compression-webpack-plugin');
+const html = require('html-webpack-plugin');
+const copy = require('copy-webpack-plugin');
+const extract = require('extract-text-webpack-plugin');
 const portfinder = require('portfinder');
 
 module.exports = function (options, webpackOptions) {
   options = options || {};
 
-  if (options.aot) {
-    console.log(`Running build for ${options.client ? 'client' : 'server'} with AoT compilation...`)
-  }
+  let config = {};
 
-  const serverConfig = webpackMerge({}, commonPartial, serverPartial, {
-    entry: options.aot ? './src/main.server.aot.ts' : serverPartial.entry,
+  config = webpackMerge({}, config, {
+    entry: getEntry(options),
+    resolve: { extensions: ['.ts', '.js'] },
+    output: {
+      path: root('dist')
+    },
+    module: {
+      rules: [
+        { test: /\.html$/, loader: 'raw-loader' },
+        { test: /\.json$/, loader: 'json-loader' },
+        { test: /\.(jp?g|png|gif)$/, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: 'images/[hash].[ext]' } },
+        { test: /\.(eot|woff2?|svg|ttf|otf)([\?]?.*)$/, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: 'fonts/[hash].[ext]' } }
+      ]
+    },
     plugins: [
-      getAotPlugin('server', !!options.aot)
+      new copy([{ context: './public', from: '**/*' }])
     ]
-  }, getProdStylesConfig());
+  });
 
-  let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
-    plugins: [
-      getAotPlugin('client', !!options.aot)
-    ]
-  }, options.dev ? getDevStylesConfig() : getProdStylesConfig());
+  if (options.client) {
+    config = webpackMerge({}, config, {
+      output: {
+        filename: 'app.js'
+      },
+      target: 'web',
+      plugins: [
+        new html({ template: root('src/index.html'), output: root('dist') })
+      ],
+      devServer: {
+        historyApiFallback: true,
+        port: 8000,
+        open: true,
+        hot: false,
+        inline: true,
+        stats: { colors: true, chunks: false },
+        watchOptions: {
+          aggregateTimeout: 300,
+          poll: 1000
+        }
+      }
+    });
+  } else if (options.server) {
+    config = webpackMerge({}, config, {
+      output: { filename: 'server.js' },
+      target: 'node'
+    });
+  }
 
   if (webpackOptions.p) {
-    clientConfig = webpackMerge({}, clientConfig, prodPartial);
+    if (!options.server) {
+      config = webpackMerge({}, config, getProductionPlugins());
+      config = webpackMerge({}, config, getProdStylesConfig());
+    }
+  } else {
+    if (!options.server) {
+      config = webpackMerge({}, config, getDevStylesConfig());
+    }
   }
 
-  let config;
+  if (options.aot) {
+    console.log(`Running build for ${options.client ? 'client' : 'server'} with AoT compilation...`)
 
-  if (options.client) {
-    config = clientConfig;
-  } else if (options.server) {
-    config = serverConfig;
+    config = webpackMerge({}, config, {
+      module: {
+        rules: [{ test: /\.ts$/, loader: '@ngtools/webpack' }]
+      },
+      plugins: [
+        new AoTPlugin({
+          tsConfigPath: options.client ? root('src/tsconfig.browser.json') : root('src/tsconfig.server.json')
+        })
+      ]
+    });
+  } else {
+    config = webpackMerge({}, config, {
+      module: {
+        rules: [{ test: /\.ts$/, loader: '@ngtools/webpack' }]
+      },
+      plugins: [
+        new AoTPlugin({
+          tsConfigPath: options.client ? root('src/tsconfig.browser.json') : root('src/tsconfig.server.json'),
+          skipCodeGeneration: true
+        })
+      ]
+    });
   }
 
   if (options.serve) {
-    if (!options.aot) {
-      config.module.rules.shift();
-      config = webpackMerge({}, config, devPartial);
-    }
-
     return portfinder.getPortPromise().then(port => {
       config.devServer.port = port;
       return config;
@@ -56,3 +107,60 @@ module.exports = function (options, webpackOptions) {
     return Promise.resolve(config);
   }
 }
+
+function root(path) {
+  return resolve(__dirname, path);
+}
+
+function getEntry(options) {
+  if (options.client) {
+    if (options.aot) {
+      return { app: root('src/main.browser.aot.ts') };
+    } else {
+      return { app: root('src/main.browser.ts') };
+    }
+  } else if (options.server) {
+    if (options.aot) {
+      return { app: root('src/main.server.aot.ts') };
+    } else {
+      return { app: root('src/main.server.ts') };
+    }
+  }
+}
+
+function getProductionPlugins() {
+  return {
+    plugins: [
+      new compression({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.html$/, threshold: 10240, minRatio: 0.8 })
+    ]
+  }
+}
+
+function getDevStylesConfig() {
+  return {
+    module: {
+      rules: [
+        { test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: [root('src/app')] },
+        { test: /\.css$/, use: ['to-string-loader', 'css-loader'], exclude: [root('src/styles')] },
+        { test: /\.scss$|\.sass$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: [root('src/styles') ] },
+        { test: /\.scss$|\.sass$/, use: ['to-string-loader', 'css-loader', 'sass-loader'], exclude: [root('src/styles')] },
+      ]
+    }
+  };
+}
+
+function getProdStylesConfig() {
+  return {
+    plugins: [
+      new extract('[name].css')
+    ],
+    module: {
+      rules: [
+        { test: /\.css$/, use: extract.extract({ fallback: 'style-loader', use: 'css-loader' }), include: [root('src/styles')] },
+        { test: /\.css$/, use: ['to-string-loader', 'css-loader'], exclude: [root('src/styles')] },
+        { test: /\.scss$|\.sass$/, loader: extract.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }), exclude: [root('src/app')] },
+        { test: /\.scss$|\.sass$/, use: ['to-string-loader', 'css-loader', 'sass-loader'], exclude: [root('src/styles')] },
+      ]
+    }
+  };
+}