From ba0cbc6b4d664705d94151c352166106012cbf80 Mon Sep 17 00:00:00 2001 From: joshuawilson Date: Thu, 26 Jul 2018 10:25:55 -0400 Subject: [PATCH] fix(build): update webpack build configs to use Webpack 4 --- config/webpack.common.js | 107 ++++++++++++++++++++------------------- config/webpack.perf.js | 39 +------------- config/webpack.test.js | 52 +++++++------------ package.json | 1 + 4 files changed, 75 insertions(+), 124 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index 43e16b5..cc4e16e 100644 --- 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,35 +152,6 @@ 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'], { @@ -167,20 +159,29 @@ module.exports = { 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 index 1caf274..a776912 100644 --- 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 index 9537bd0..0858a51 100644 --- 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 index 0af410e..a16de47 100644 --- 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",