fix(build): fixed webpack config and circular-dependency-plugin config.

Closes #397, #315

README.md

@@ -38,7 +38,7 @@ Stark's reusable build integrates support for:
 * [Tree shaking](https://webpack.js.org/guides/tree-shaking/) to automatically remove unused code from your production bundle
 * [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) with [@angularclass/hmr](https://github.com/angularclass/angular-hmr) and [@angularclass/hmr-loader](https://github.com/angularclass/angular-hmr-loader)
 * Minification & uglyfication
-* Cache busting with [file hashes](https://www.npmjs.com/package/webpack-sha-hash)
+* Cache busting with file hashes
 * [Tests](https://angular.io/docs/ts/latest/guide/testing.html): [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), with source maps support, possibility to execute subsets of the tests, ...
 * Tests code coverage with [Istanbul](https://github.com/gotwarlost/istanbul)
 * Environments definition (development | production)
@@ -47,17 +47,20 @@ Stark's reusable build integrates support for:
 * Local testing with fake back-ends using [json-server](https://github.com/typicode/json-server)
 * Router visualization with [UI-Router Visualizer](https://github.com/ui-router/visualizer)
 
-## Stark modules
-TODO list stark modules and point to docs
-
 ## Developer guide
 TODO add links to developer guide sections
 
+### Releases
+Stark releases are available on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages
+
 ### Contributing
-Please follow our [contribution guidelines](/CONTRIBUTING.md)
+Please follow our [contribution guidelines](/CONTRIBUTING.md).
+
+To know how to release Stark, refer to [this page](/RELEASE.md).
 
-### Releasing Stark
-See [this page](/RELEASE.md)
+### Snapshot builds
+Each and every day, a new snapshot of Stark is built, tested and published on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages
+See [this page](/SNAPSHOTS.md) for more information about the process behind this.
 
 ## Authors
 

SNAPSHOTS.md

@@ -0,0 +1,6 @@
+# Stark Snapshots
+Daily snapshot builds are created and published by a Travis cron job.
+This was introduced via [this issue](https://github.com/NationalBankBelgium/stark/issues/27).
+
+For details, refer to `.travis.yml` and `release-publish.sh`
+

package.json

@@ -53,7 +53,7 @@
     "stylelint-config-prettier": "3.2.0",
     "tslint": "5.10.0",
     "tslint-config-prettier": "1.12.0",
-    "tslint-sonarts": "1.6.0",
+    "tslint-sonarts": "1.7.0",
     "typescript": "2.7.2",
     "uglify-es": "3.3.9",
     "zone.js": "0.8.26"
@@ -96,7 +96,7 @@
     "docs:starter:serve": "cd starter && npm run docs:serve && cd ..",
     "generate:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "generate:changelog-recent": "conventional-changelog -p angular | tail -n +3",
-    "lint": "tslint --config tslint.json --project ./packages/tsconfig.json --format codeFrame",
+    "lint": "tslint --config ./tslint.json --project ./packages/tsconfig.json --format codeFrame",
     "lint:stark-core": "cd packages/stark-core && npm run lint && cd ../..",
     "lint:stark-ui": "cd packages/stark-ui && npm run lint && cd ../..",
     "lint:starter": "cd starter && npm run lint && cd ..",

packages/stark-build/config/webpack.common.js

@@ -9,16 +9,15 @@ const commonData = require("./webpack.common-data.js"); // common configuration
  * problem with copy-webpack-plugin
  */
 // const DefinePlugin = require("webpack/lib/DefinePlugin");
-const SplitChunksPlugin = require("webpack/lib/optimize/SplitChunksPlugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const BaseHrefWebpackPlugin = require("base-href-webpack-plugin").BaseHrefWebpackPlugin;
-const HashedModuleIdsPlugin = require("webpack/lib/HashedModuleIdsPlugin");
 // const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin");
 // const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
 const { AngularCompilerPlugin } = require("@ngtools/webpack");
 const AngularNamedLazyChunksWebpackPlugin = require("angular-named-lazy-chunks-webpack-plugin");
 const ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin");
+const CircularDependencyPlugin = require("circular-dependency-plugin");
 const PurifyPlugin = require("@angular-devkit/build-optimizer").PurifyPlugin;
 
 const buildUtils = require("./build-utils");
@@ -28,7 +27,7 @@ const buildUtils = require("./build-utils");
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function(options) {
+module.exports = (options) => {
 	const isProd = options.ENV === "production";
 	const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
 	const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
@@ -178,11 +177,16 @@ module.exports = function(options) {
 
 				// TsLint loader support for *.ts files
 				// reference: https://github.com/wbuchwalter/tslint-loader
+				// FIXME: given the warnings we have with build:prod (see https://github.com/NationalBankBelgium/stark/issues/397)
+				// this probably doesn't load the tslint configuration we think?
 				{
 					enforce: "pre",
 					test: /\.ts$/,
 					use: ["tslint-loader"],
-					exclude: [helpers.root("node_modules")]
+					exclude: [helpers.root("node_modules")],
+					options: {
+						typeCheck: false, // FIXME remove this line once the type checking issues are gone (cfr FIXME above)
+					}
 				},
 
 				// Source map loader support for *.js files
@@ -365,31 +369,13 @@ module.exports = function(options) {
 
 			new PurifyPlugin(),
 
-			/**
-			 * Plugin: CommonsChunkPlugin
-			 * Description: Shares common code between the pages.
-			 * It identifies common modules and put them into a commons chunk.
-			 *
-			 * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
-			 * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
-			 */
-			// FIXME Configure splitChunks
-			// new CommonsChunkPlugin({
-			// 	name: "polyfills",
-			// 	chunks: ["polyfills"]
-			// }),
-			//
-			// new CommonsChunkPlugin({
-			// 	minChunks: Infinity,
-			// 	name: "inline"
-			// }),
-			// new CommonsChunkPlugin({
-			// 	name: "main",
-			// 	async: "common",
-			// 	children: true,
-			// 	minChunks: 2
-			// }),
-
+			new CircularDependencyPlugin({
+				// exclude detection of files based on a RegExp
+				exclude: /node_modules/,
+				// log warnings to webpack
+				failOnError: false
+			}),
+
 			/**
 			 * Plugin: CopyWebpackPlugin
 			 * Description: Copy files and directories in webpack.
@@ -457,18 +443,6 @@ module.exports = function(options) {
 				{}
 			),
 
-			/**
-			 * Plugin: HashedModuleIdsPlugin
-			 * Description: This plugin will cause hashes to be based on the relative path of the module,
-			 * generating a four character string as the module id
-			 * See: https://webpack.js.org/plugins/hashed-module-ids-plugin/
-			 */
-			new HashedModuleIdsPlugin({
-				hashFunction: "sha256",
-				hashDigest: "hex",
-				hashDigestLength: 20
-			}),
-
 			/**
 			 * Plugin: ContextReplacementPlugin
 			 * Description: allows to override the inferred information in a 'require' context

packages/stark-build/config/webpack.dev.js

@@ -13,7 +13,6 @@ const SourceMapDevToolPlugin = require("webpack/lib/SourceMapDevToolPlugin");
 
 const WriteFilePlugin = require("write-file-webpack-plugin");
 const StylelintPlugin = require("stylelint-webpack-plugin");
-const CircularDependencyPlugin = require("circular-dependency-plugin");
 
 // Dev custom config
 const webpackCustomConfig = require(helpers.root("config/webpack-custom-config.dev.json"));
@@ -272,13 +271,6 @@ module.exports = function(env) {
 				files: ["src/**/*.?(pc|sc|c|sa)ss"] // pcss|scss|css|sass
 			}),
 
-			new CircularDependencyPlugin({
-				// exclude detection of files based on a RegExp
-				exclude: /node_modules/,
-				// log warnings to webpack
-				failOnError: false
-			}),
-
 			/**
 			 * Plugin: WebpackMonitor
 			 * Description: This plugins give us information about the bundle size

packages/stark-build/config/webpack.prod.js

@@ -21,6 +21,7 @@ const PurifyPlugin = require("@angular-devkit/build-optimizer").PurifyPlugin;
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const HashedModuleIdsPlugin = require("webpack/lib/HashedModuleIdsPlugin");
 
 function getUglifyOptions(supportES2015) {
 	const uglifyCompressOptions = {
@@ -71,9 +72,20 @@ module.exports = function() {
 
 		mode: "production",
 
+		// reference: https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
 		optimization: {
+			removeAvailableModules: true,
+			removeEmptyChunks: true,
+			mergeDuplicateChunks: true,
+			flagIncludedChunks: true,
+			occurrenceOrder: true,
+			providedExports: true,
+			usedExports: true,
+			sideEffects: true,
 			concatenateModules: true,
-			minimizer: [
+			runtimeChunk: true,
+			noEmitOnErrors: true,
+			minimizer: [ // minimization libraries to use
 				/**
 				 * Plugin: UglifyJsPlugin
 				 * Description: Minimize all JavaScript output of chunks.
@@ -84,20 +96,41 @@ module.exports = function() {
 				 * NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 				 */
 				new UglifyJsPlugin({
-					sourceMap: true,
+					sourceMap: true, // useful to still be able to debug in production
 					uglifyOptions: getUglifyOptions(supportES2015)
 				}),
+				// other options than Uglify: BabelifyMinifyWebpackPlugin or ClosureCompilerPlugin
 
 				new OptimizeCSSAssetsPlugin({})
 			],
-			cacheGroups: {
-				styles: {
-					name: "styles",
-					test: /\.css$/,
-					chunks: "all",
-					enforce: true
+			splitChunks: { // reference: https://webpack.js.org/plugins/split-chunks-plugin/
+				chunks: "all", // include all types of chunks (async or not)
+				cacheGroups: { // assign modules to cache groups
+					// cache group for all modules from node_modules that are duplicated in at least 2 chunks
+					vendors: {
+						test: /[\\/]node_modules[\\/]/,
+						name: "vendor",
+						chunks: "all",
+						priority: -10
+					},
+					styles: {
+						name: "styles",
+						test: /\.css$/,
+						chunks: "all",
+						enforce: true
+					},
+					// FIXME check if needed
+					// polyfills: {
+					// 	name: "polyfills",
+					// 	chunks: ["polyfills"]
+					// },
+					default: {
+						minChunks: 2,
+						priority: -20,
+						reuseExistingChunk: true
+					}
 				}
-			}
+			},
 		},
 
 		/**
@@ -284,9 +317,16 @@ module.exports = function() {
 			new PurifyPlugin() /* buildOptimizer */,
 
 			/**
+			 * Plugin: HashedModuleIdsPlugin
+			 * Description: This plugin will cause hashes to be based on the relative path of the module,
+			 * generating a four character string as the module id
 			 * See: https://webpack.js.org/plugins/hashed-module-ids-plugin/
 			 */
-			new HashedModuleIdsPlugin()
+			new HashedModuleIdsPlugin({
+				hashFunction: "sha256",
+				hashDigest: "hex",
+				hashDigestLength: 20
+			}),
 		]
 	});
 };

packages/stark-build/package.json

@@ -74,7 +74,6 @@
     "webpack-dll-bundles-plugin": "1.0.0-beta.5",
     "webpack-merge": "4.1.2",
     "webpack-monitor": "1.0.14",
-    "webpack-sha-hash": "2.0.0",
     "write-file-webpack-plugin": "4.3.1"
   },
   "devDependencies": {

packages/stark-core/package.json

@@ -6,7 +6,7 @@
   "esm5": "./esm5/stark-core.js",
   "esm2015": "./esm2015/stark-core.js",
   "fesm5": "./fesm5/stark-core.js",
-  "fesm2015": "fesm2015/stark-core.js",
+  "fesm2015": "./fesm2015/stark-core.js",
   "main": "bundles/stark-core.umd.js",
   "types": "stark-core.d.ts",
   "description": "Stark - Core",
@@ -63,7 +63,7 @@
     "docs:coverage": "npm run docs -- --coverageTest --coverageThresholdFail true",
     "docs:serve": "npm run docs -- --watch --serve --port 4321",
     "ngc": "node ./../node_modules/@angular/compiler-cli/src/main.js -p tsconfig-build.json",
-    "lint": "node ../../node_modules/tslint/bin/tslint --config tslint.json --project ./tsconfig.spec.json --format codeFrame",
+    "lint": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame",
     "test-fast": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start ./karma.conf.typescript.js",
     "test-fast:ci": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start karma.conf.typescript.ci.js",
     "tsc": "node ../../node_modules/typescript/bin/tsc -p tsconfig-build.json",

starter/package.json

@@ -122,8 +122,8 @@
     "@angular/platform-server": "6.0.2",
     "@angular/router": "6.0.2",
     "@mdi/angular-material": "2.3.54",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-ec1568a.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-ec1568a.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-9f4cd05.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-9f4cd05.tgz",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.6",
     "eligrey-classlist-js-polyfill": "1.2.20180112",
@@ -138,8 +138,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-ec1568a.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-ec1568a.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-9f4cd05.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-9f4cd05.tgz",
     "@types/core-js": "0.9.46",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",