fix(build): update webpack build configs to use Webpack 4

fabric8-ui · Jul 26, 2018 · ba0cbc6 · ba0cbc6
1 parent 79d90da
commit ba0cbc6
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 124 deletions.
diff --git a/config/webpack.common.js b/config/webpack.common.js
@@ -3,15 +3,14 @@
  */
 const webpack = require('webpack');
 const helpers = require('./helpers');
-var path = require('path');
-var stringify = require('json-stringify');
+const path = require('path');
+const stringify = require('json-stringify');
 
 /**
  * Webpack Plugins
  */
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
 
 /*
@@ -39,6 +38,13 @@ module.exports = {
    */
   //cache: false,
 
+  /**
+   * As of Webpack 4 we need to set the mode.
+   * Since this is a library and it uses gulp to build the library,
+   * we only have Test and Perf.
+   */
+  mode: 'development',
+
   /*
    * The entry point for the bundle
    * Our Angular.js app
@@ -76,7 +82,15 @@ module.exports = {
       {
         test: /\.ts$/,
         enforce: 'pre',
-        use: 'tslint-loader',
+        use: [{
+          loader: 'tslint-loader',
+          options: {
+            emitErrors: false,
+            failOnHint: false,
+            resourcePath: 'src',
+            typeCheck: true,
+          }
+        }],
         exclude: [helpers.root('node_modules')]
       },
       {
@@ -95,9 +109,10 @@ module.exports = {
        */
       {
         test: /\.json$/,
-        use: ['json-loader']
-      },
-
+        type: "javascript/auto",
+        use: ['custom-json-loader'],
+        exclude: [helpers.root('src/index.html')]
+      }
     ]
   },
 
@@ -114,7 +129,13 @@ module.exports = {
      * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
      * See: https://github.com/angular/angular/issues/11580
      */
-    new webpack.ContextReplacementPlugin(
+    new ContextReplacementPlugin(
+      // The (\\|\/) piece accounts for path separators in *nix and Windows
+      // /angular(\\|\/)core(\\|\/)@angular/,
+      /\@angular(\\|\/)core(\\|\/)fesm5/,
+      helpers.root('./src')
+    ),
+    new ContextReplacementPlugin(
       // The (\\|\/) piece accounts for path separators in *nix and Windows
       /angular(\\|\/)core(\\|\/)@angular/,
       helpers.root('./src')
@@ -131,56 +152,36 @@ module.exports = {
       sourceMap: false
     }),
 
-    new HtmlWebpackPlugin(),
-
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        tslintLoader: {
-          emitErrors: false,
-          failOnHint: false
-        },
-
-       }
-    }),
-    // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
-    // Only emit files when there are no errors
-    new webpack.NoEmitOnErrorsPlugin(),
-
-    // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
-    // // Dedupe modules in the output
-    // new webpack.optimize.DedupePlugin(),
-
-    // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
-    // Minify all javascript, switch loaders to minimizing mode
-    // new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
-
-    // Copy assets from the public folder
-    // Reference: https://github.com/kevlened/copy-webpack-plugin
-    // new CopyWebpackPlugin([{
-    //   from: helpers.root('src/public')
-    // }]),
-
     // Reference: https://github.com/johnagan/clean-webpack-plugin
     // Removes the bundle folder before the build
     new CleanWebpackPlugin(['bundles'], {
       root: helpers.root(),
       verbose: false,
       dry: false
       })
-    ],
+  ],
 
-    /**
-     * Include polyfills or mocks for various node stuff
-     * Description: Node configuration
-     *
-     * See: https://webpack.github.io/docs/configuration.html#node
-     */
-    node: {
-      global: true,
-      crypto: 'empty',
-      process: true,
-      module: false,
-      clearImmediate: false,
-      setImmediate: false
-    }
+  /**
+   * These common plugins were removed from Webpack 3 and are now set in this object.
+   */
+  optimization: {
+    namedModules: true, // NamedModulesPlugin()
+    noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+    concatenateModules: true //ModuleConcatenationPlugin
+  },
+
+  /**
+   * Include polyfills or mocks for various node stuff
+   * Description: Node configuration
+   *
+   * See: https://webpack.github.io/docs/configuration.html#node
+   */
+  node: {
+    global: true,
+    crypto: 'empty',
+    process: true,
+    module: false,
+    clearImmediate: false,
+    setImmediate: false
+  }
 };
diff --git a/config/webpack.perf.js b/config/webpack.perf.js
@@ -10,8 +10,6 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
-const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
-const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 /**
@@ -21,7 +19,7 @@ const ENV = process.env.ENV = process.env.NODE_ENV = 'performance';
 const HOST = process.env.HOST || 'localhost';
 const PORT = process.env.PORT || 3000;
 const HMR = helpers.hasProcessFlag('hot');
-const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
+const METADATA = webpackMerge(commonConfig, {
   host: HOST,
   port: PORT,
   ENV: ENV,
@@ -34,7 +32,7 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
 module.exports = function () {
-  return webpackMerge(commonConfig({env: ENV}), {
+  return webpackMerge(commonConfig, {
 
     /**
      * Developer tool to enhance debugging
@@ -112,40 +110,7 @@ module.exports = function () {
           'NODE_ENV': JSON.stringify(METADATA.ENV),
           'HMR': METADATA.HMR
         }
-      }),
-
-      /**
-       * Plugin: NamedModulesPlugin (experimental)
-       * Description: Uses file names as module name.
-       *
-       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
-       */
-      new NamedModulesPlugin(),
-
-      /**
-       * Plugin LoaderOptionsPlugin (experimental)
-       *
-       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
-       */
-      new LoaderOptionsPlugin({
-        debug: true,
-        options: {
-
-          /**
-           * Static analysis linter for TypeScript advanced options configuration
-           * Description: An extensible linter for the TypeScript language.
-           *
-           * See: https://github.com/wbuchwalter/tslint-loader
-           */
-          tslint: {
-            emitErrors: false,
-            failOnHint: false,
-            resourcePath: 'src'
-          }
-
-        }
       })
-
     ],
 
     /**

diff --git a/config/webpack.test.js b/config/webpack.test.js
@@ -18,7 +18,7 @@ const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
  * Webpack Constants
  */
 const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
-const API_URL = process.env.API_URL || (ENV === 'inmemory'?'app/':'http://localhost:8080/api/');
+const API_URL = process.env.API_URL || (ENV == 'inmemory'?'app/':'http://localhost:8080/api/');
 const FABRIC8_WIT_API_URL = process.env.FABRIC8_WIT_API_URL;
 const FABRIC8_RECOMMENDER_API_URL = process.env.FABRIC8_RECOMMENDER_API_URL || 'http://api-bayesian.dev.rdu2c.fabric8.io/api/v1/';
 
@@ -27,13 +27,20 @@ const FABRIC8_RECOMMENDER_API_URL = process.env.FABRIC8_RECOMMENDER_API_URL || '
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
+module.exports = function () {
   return {
 
     entry: {
       'app': './index.ts'
     },
 
+    /**
+     * As of Webpack 4 we need to set the mode.
+     * Since this is a library and it uses gulp to build the library,
+     * we only have Test and Perf.
+     */
+    mode: 'development',
+
     /**
      * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
      *
@@ -63,13 +70,6 @@ module.exports = function (options) {
      * See: http://webpack.github.io/docs/configuration.html#module
      */
     module: {
-
-      /**
-       * An array of applied pre and post loaders.
-       *
-       * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
-       */
-
       /**
        * An array of automatically applied loaders.
        *
@@ -117,7 +117,8 @@ module.exports = function (options) {
          */
         {
           test: /\.json$/,
-          use: ['json-loader'],
+          type: "javascript/auto",
+          use: ['custom-json-loader'],
           exclude: [helpers.root('src/index.html')]
         },
 
@@ -178,34 +179,17 @@ module.exports = function (options) {
        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
        * See: https://github.com/angular/angular/issues/11580
        */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        // /angular(\\|\/)core(\\|\/)@angular/,
+        /\@angular(\\|\/)core(\\|\/)fesm5/,
+        helpers.root('./src')
+      ),
       new ContextReplacementPlugin(
         // The (\\|\/) piece accounts for path separators in *nix and Windows
         /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
         helpers.root('src') // location of your src
-      ),
-
-      /**
-       * Plugin LoaderOptionsPlugin (experimental)
-       *
-       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
-       */
-      new LoaderOptionsPlugin({
-        debug: true,
-        options: {
-
-          /**
-           * Static analysis linter for TypeScript advanced options configuration
-           * Description: An extensible linter for the TypeScript language.
-           *
-           * See: https://github.com/wbuchwalter/tslint-loader
-           */
-          tslint: {
-            emitErrors: false,
-            failOnHint: false,
-            resourcePath: 'src'
-        }
-        }
-      }),
+      )
     ],
 
     /**

diff --git a/package.json b/package.json
@@ -153,6 +153,7 @@
     "url-loader": "1.0.1",
     "webpack": "4.16.2",
     "webpack-bundle-analyzer": "2.13.1",
+    "webpack-cli": "3.1.0",
     "webpack-dev-middleware": "3.1.3",
     "webpack-dev-server": "3.1.5",
     "webpack-dll-bundles-plugin": "1.0.0-beta.5",