From 78c799f0111240857f59ed46fd4294b0d19cbe9b Mon Sep 17 00:00:00 2001 From: tenretC Date: Fri, 4 May 2018 11:46:00 +0200 Subject: [PATCH] fix(stark-build) fix(stark-starter): fix webpack monitor issues with reports folder and HMR --- packages/stark-build/config/webpack.dev.js | 519 +++++++++++---------- starter/package.json | 7 +- 2 files changed, 268 insertions(+), 258 deletions(-) diff --git a/packages/stark-build/config/webpack.dev.js b/packages/stark-build/config/webpack.dev.js index 10c34c0b9f..df2b6952d9 100644 --- a/packages/stark-build/config/webpack.dev.js +++ b/packages/stark-build/config/webpack.dev.js @@ -26,297 +26,306 @@ const WebpackMonitor = require("webpack-monitor"); * * See: http://webpack.github.io/docs/configuration.html#cli */ -module.exports = function() { +module.exports = function (env) { + // for the content of the env parameter see here : https://webpack.js.org/api/cli/#environment-options const ENV = (process.env.ENV = process.env.NODE_ENV = "development"); const HOST = process.env.HOST || "localhost"; const PORT = process.env.PORT || 3000; + let MONITOR = false; + if (env && typeof env.monitor !== "undefined") { + MONITOR = env.monitor; + } + +const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, { + HOST: HOST, + PORT: PORT, + ENV: ENV, + HMR: helpers.hasProcessFlag("hot"), + environment: helpers.hasProcessFlag("hot") ? "hmr" : "dev" + // PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT // TODO check if needed/useful in our case? +}); + +// Directives to be used in CSP header +const cspDirectives = [ + "base-uri 'self'", + // "default-src 'self'", // FIXME: enable as soon as the issue is fixed in Angular (https://github.com/angular/angular-cli/issues/6872 ) + "child-src 'self'", + "connect-src 'self' ws://" + METADATA.HOST + ":" + METADATA.PORT + " " + webpackCustomConfig["cspConnectSrc"], // ws://HOST:PORT" is due to Webpack + "font-src 'self'", + "form-action 'self' " + webpackCustomConfig["cspFormAction"], + "frame-src 'self'", // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported + "frame-ancestors 'none'", // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY) + "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images + "media-src 'self'", + "object-src 'self'", + "plugin-types application/pdf" // valid mime-types for plugins invoked via and + // "script-src 'self'", // FIXME: enable as soon as the issue is fixed in Angular (https://github.com/angular/angular-cli/issues/6872 ) + // "style-src 'self' 'nonce-uiroutervisualizer' 'nonce-cef324d21ec5483c8819cc7a5e33c4a2'" // we define the same nonce value as in the style-loader // FIXME: DomSharedStylesHost.prototype._addStylesToHost in platform-browser.js adds inline style! +]; + +const rootDir = buildUtils.getAngularCliAppConfig().root; + +return webpackMerge(commonConfig({ENV: ENV, metadata: METADATA}), { + /** + * Tell webpack which environment the application is targeting. + * reference: https://webpack.js.org/configuration/target/ + * reference: https://webpack.js.org/concepts/targets/ + */ + target: "web", // <== can be omitted as default is "web" + + /** + * Options affecting the output of the compilation. + * + * See: http://webpack.github.io/docs/configuration.html#output + */ + output: { + /** + * The output directory as absolute path (required). + * + * See: http://webpack.github.io/docs/configuration.html#output-path + */ + path: helpers.root(buildUtils.getAngularCliAppConfig().outDir), - const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, { - HOST: HOST, - PORT: PORT, - ENV: ENV, - HMR: helpers.hasProcessFlag("hot"), - environment: helpers.hasProcessFlag("hot") ? "hmr" : "dev" - // PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT // TODO check if needed/useful in our case? - }); - - // Directives to be used in CSP header - const cspDirectives = [ - "base-uri 'self'", - // "default-src 'self'", // FIXME: enable as soon as the issue is fixed in Angular (https://github.com/angular/angular-cli/issues/6872 ) - "child-src 'self'", - "connect-src 'self' ws://" + METADATA.HOST + ":" + METADATA.PORT + " " + webpackCustomConfig["cspConnectSrc"], // ws://HOST:PORT" is due to Webpack - "font-src 'self'", - "form-action 'self' " + webpackCustomConfig["cspFormAction"], - "frame-src 'self'", // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported - "frame-ancestors 'none'", // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY) - "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images - "media-src 'self'", - "object-src 'self'", - "plugin-types application/pdf" // valid mime-types for plugins invoked via and - // "script-src 'self'", // FIXME: enable as soon as the issue is fixed in Angular (https://github.com/angular/angular-cli/issues/6872 ) - // "style-src 'self' 'nonce-uiroutervisualizer' 'nonce-cef324d21ec5483c8819cc7a5e33c4a2'" // we define the same nonce value as in the style-loader // FIXME: DomSharedStylesHost.prototype._addStylesToHost in platform-browser.js adds inline style! - ]; - - const rootDir = buildUtils.getAngularCliAppConfig().root; - - return webpackMerge(commonConfig({ ENV: ENV, metadata: METADATA }), { /** - * Tell webpack which environment the application is targeting. - * reference: https://webpack.js.org/configuration/target/ - * reference: https://webpack.js.org/concepts/targets/ + * Specifies the name of each output file on disk. + * IMPORTANT: You must not specify an absolute path here! + * + * See: http://webpack.github.io/docs/configuration.html#output-filename */ - target: "web", // <== can be omitted as default is "web" + filename: "[name].[hash].bundle.js", /** - * Options affecting the output of the compilation. + * The filename of the SourceMaps for the JavaScript files. + * They are inside the output.path directory. * - * See: http://webpack.github.io/docs/configuration.html#output + * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename */ - output: { - /** - * The output directory as absolute path (required). - * - * See: http://webpack.github.io/docs/configuration.html#output-path - */ - path: helpers.root(buildUtils.getAngularCliAppConfig().outDir), + sourceMapFilename: "[file].[hash].map", + /** The filename of non-entry chunks as relative path + * inside the output.path directory. + * + * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename + */ + chunkFilename: "[id].[hash].chunk.js", + + library: "ac_[name]", + libraryTarget: "var" + }, + + module: { + rules: [ /** - * Specifies the name of each output file on disk. - * IMPORTANT: You must not specify an absolute path here! + * Css loader support for *.css files (styles directory only) + * Loads external css styles into the DOM, supports HMR * - * See: http://webpack.github.io/docs/configuration.html#output-filename */ - filename: "[name].[hash].bundle.js", + { + test: /\.css$/, + use: [{ + loader: "style-loader", + options: {attrs: {nonce: "cef324d21ec5483c8819cc7a5e33c4a2"}} + }, "css-loader"], + include: [helpers.root(rootDir, "styles")] + }, /** - * The filename of the SourceMaps for the JavaScript files. - * They are inside the output.path directory. + * Sass loader support for *.scss files (styles directory only) + * Loads external sass styles into the DOM, supports HMR * - * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename */ - sourceMapFilename: "[file].[hash].map", + { + test: /\.scss$/, + use: [ + {loader: "style-loader", options: {attrs: {nonce: "cef324d21ec5483c8819cc7a5e33c4a2"}}}, + "css-loader", + "sass-loader" + ], + include: [helpers.root(rootDir, "styles")] + }, - /** The filename of non-entry chunks as relative path - * inside the output.path directory. + /** + * PostCSS loader support for *.pcss files (styles directory only) + * Loads external sass styles into the DOM, supports HMR * - * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename */ - chunkFilename: "[id].[hash].chunk.js", - - library: "ac_[name]", - libraryTarget: "var" - }, - - module: { - rules: [ - /** - * Css loader support for *.css files (styles directory only) - * Loads external css styles into the DOM, supports HMR - * - */ - { - test: /\.css$/, - use: [{ loader: "style-loader", options: { attrs: { nonce: "cef324d21ec5483c8819cc7a5e33c4a2" } } }, "css-loader"], - include: [helpers.root(rootDir, "styles")] - }, - - /** - * Sass loader support for *.scss files (styles directory only) - * Loads external sass styles into the DOM, supports HMR - * - */ - { - test: /\.scss$/, - use: [ - { loader: "style-loader", options: { attrs: { nonce: "cef324d21ec5483c8819cc7a5e33c4a2" } } }, - "css-loader", - "sass-loader" - ], - include: [helpers.root(rootDir, "styles")] - }, - - /** - * PostCSS loader support for *.pcss files (styles directory only) - * Loads external sass styles into the DOM, supports HMR - * - */ - { - test: /\.pcss$/, - use: [ - { loader: "style-loader", options: { attrs: { nonce: "cef324d21ec5483c8819cc7a5e33c4a2" } } }, - { - loader: "css-loader", - options: { - //modules: true, // to check if needed - //minimize: true, - // even if disabled, sourceMaps gets generated - sourceMap: false, // true - autoprefixer: false, - // see https://github.com/webpack-contrib/css-loader#importloaders) - importLoaders: 1 // 1 => postcss-loader - } - }, - { - loader: "postcss-loader", - options: { - sourceMap: true, - plugins: commonData.postcssPlugins - } + { + test: /\.pcss$/, + use: [ + {loader: "style-loader", options: {attrs: {nonce: "cef324d21ec5483c8819cc7a5e33c4a2"}}}, + { + loader: "css-loader", + options: { + //modules: true, // to check if needed + //minimize: true, + // even if disabled, sourceMaps gets generated + sourceMap: false, // true + autoprefixer: false, + // see https://github.com/webpack-contrib/css-loader#importloaders) + importLoaders: 1 // 1 => postcss-loader } - ], - include: [helpers.root(rootDir, "styles")] - } - ] - }, + }, + { + loader: "postcss-loader", + options: { + sourceMap: true, + plugins: commonData.postcssPlugins + } + } + ], + include: [helpers.root(rootDir, "styles")] + } + ] + }, - plugins: [ - /** - * Plugin: SourceMapDevToolPlugin - * Description: enables more fine grained control of source map generation - * See: https://webpack.js.org/plugins/source-map-dev-tool-plugin/ - * - * This config gives the same results as using devtool: "devtool: 'cheap-module-source-map'" - * A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line. - * See: https://webpack.js.org/configuration/devtool - * - * IMPORTANT: this should be used instead of EvalSourceMapDevToolPlugin to avoid using eval() which violates CSP - */ - new SourceMapDevToolPlugin({ - filename: "[file].map[query]", - moduleFilenameTemplate: "[resource-path]", - fallbackModuleFilenameTemplate: "[resource-path]?[hash]", - module: true, // default: true - columns: false, // Default: true. False = less accurate source maps but will also improve compilation performance significantly - sourceRoot: "webpack:///" - }), + plugins: [ + /** + * Plugin: SourceMapDevToolPlugin + * Description: enables more fine grained control of source map generation + * See: https://webpack.js.org/plugins/source-map-dev-tool-plugin/ + * + * This config gives the same results as using devtool: "devtool: 'cheap-module-source-map'" + * A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line. + * See: https://webpack.js.org/configuration/devtool + * + * IMPORTANT: this should be used instead of EvalSourceMapDevToolPlugin to avoid using eval() which violates CSP + */ + new SourceMapDevToolPlugin({ + filename: "[file].map[query]", + moduleFilenameTemplate: "[resource-path]", + fallbackModuleFilenameTemplate: "[resource-path]?[hash]", + module: true, // default: true + columns: false, // Default: true. False = less accurate source maps but will also improve compilation performance significantly + sourceRoot: "webpack:///" + }), - /** - * Plugin: NamedModulesPlugin (experimental) - * Description: Uses file names as module name. - * - * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb - */ - new NamedModulesPlugin(), + /** + * Plugin: NamedModulesPlugin (experimental) + * Description: Uses file names as module name. + * + * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb + */ + new NamedModulesPlugin(), - /** - * Plugin: WriteFilePlugin - * Description: This plugin makes sure that bundles and assets are written to disk - * this is necessary so that assets are available in dev mode - * See: https://www.npmjs.com/package/write-file-webpack-plugin - */ - new WriteFilePlugin(), + /** + * Plugin: WriteFilePlugin + * Description: This plugin makes sure that bundles and assets are written to disk + * this is necessary so that assets are available in dev mode + * See: https://www.npmjs.com/package/write-file-webpack-plugin + */ + new WriteFilePlugin(), - /** - * Plugin: Stylelint - * Description: Lints the stylesheets loaded in the app (pcss, scss, css, sass) - * See: https://github.com/JaKXz/stylelint-webpack-plugin - */ - new StylelintPlugin({ - configFile: ".stylelintrc", - emitErrors: false, - 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: Stylelint + * Description: Lints the stylesheets loaded in the app (pcss, scss, css, sass) + * See: https://github.com/JaKXz/stylelint-webpack-plugin + */ + new StylelintPlugin({ + configFile: ".stylelintrc", + emitErrors: false, + 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 - * See: https://github.com/webpackmonitor/webpackmonitor - */ - new WebpackMonitor({ - capture: true, // -> default 'true' - target: helpers.root("reports/webpack-monitor/stats.json"), // default -> '../monitor/stats.json' - launch: true, // -> default 'false' - port: 3030, // default -> 8081 - excludeSourceMaps: true // default 'true' - }) - ], + /** + * Plugin: WebpackMonitor + * Description: This plugins give us information about the bundle size + * See: https://github.com/webpackmonitor/webpackmonitor + */ + new WebpackMonitor({ + capture: MONITOR, // -> default 'true' + target: helpers.root("reports/webpack-monitor/stats.json"), // default -> '../monitor/stats.json' + launch: MONITOR, // -> default 'false' + port: 3030, // default -> 8081 + excludeSourceMaps: true // default 'true' + }) + ], + + /** + * Webpack Development Server configuration + * Description: The webpack-dev-server is a little node.js Express server. + * The server emits information about the compilation state to the client, + * which reacts to those events. + * + * See: https://webpack.github.io/docs/webpack-dev-server.html + */ + devServer: { + port: METADATA.PORT, + host: METADATA.HOST, + hot: METADATA.HMR, + inline: true, + compress: true, + overlay: { + errors: false, + warnings: false + }, + // public: METADATA.PUBLIC, // TODO check if needed/useful in our case? + + // HTML5 History API support: no need for # in URLs + // automatically redirect 404 errors to the index.html page + // uses connect-history-api-fallback behind the scenes: https://github.com/bripkens/connect-history-api-fallback + // reference: http://jaketrent.com/post/pushstate-webpack-dev-server/ + historyApiFallback: true, + + // Due to a security fix of Webpack Server, we enable this option to permit the access to the application when running on 0.0.0.0 + // reference: https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 + disableHostCheck: true, + + // file watch configuration + // reference: https://webpack.js.org/configuration/watch/ + watchOptions: { + // if you're using Docker you may need this + aggregateTimeout: 300, + poll: 1000 + // ignored: /node_modules/ // node_modules should also be watched for any changes in @nationalbankbelgium + }, + // TODO: to enable this we should make Webpack to write dist files to disk + // contentBase: helpers.root(buildUtils.getApplicationAssetsConfig().outDir), // necessary so that all the content is available (e.g., app assets, stark assets, ...) /** - * Webpack Development Server configuration - * Description: The webpack-dev-server is a little node.js Express server. - * The server emits information about the compilation state to the client, - * which reacts to those events. + * Here you can access the Express app object and add your own custom middleware to it. * * See: https://webpack.github.io/docs/webpack-dev-server.html */ - devServer: { - port: METADATA.PORT, - host: METADATA.HOST, - hot: METADATA.HMR, - inline: true, - compress: true, - overlay: { - errors: false, - warnings: false - }, - // public: METADATA.PUBLIC, // TODO check if needed/useful in our case? - - // HTML5 History API support: no need for # in URLs - // automatically redirect 404 errors to the index.html page - // uses connect-history-api-fallback behind the scenes: https://github.com/bripkens/connect-history-api-fallback - // reference: http://jaketrent.com/post/pushstate-webpack-dev-server/ - historyApiFallback: true, - - // Due to a security fix of Webpack Server, we enable this option to permit the access to the application when running on 0.0.0.0 - // reference: https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 - disableHostCheck: true, - - // file watch configuration - // reference: https://webpack.js.org/configuration/watch/ - watchOptions: { - // if you're using Docker you may need this - aggregateTimeout: 300, - poll: 1000 - // ignored: /node_modules/ // node_modules should also be watched for any changes in @nationalbankbelgium - }, - // TODO: to enable this we should make Webpack to write dist files to disk - // contentBase: helpers.root(buildUtils.getApplicationAssetsConfig().outDir), // necessary so that all the content is available (e.g., app assets, stark assets, ...) - - /** - * Here you can access the Express app object and add your own custom middleware to it. - * - * See: https://webpack.github.io/docs/webpack-dev-server.html - */ - before: function(app) { - // For example, to define custom handlers for some paths: - // app.get('/some/path', function(req, res) { - // res.json({ custom: 'response' }); - // }); - }, + before: function (app) { + // For example, to define custom handlers for some paths: + // app.get('/some/path', function(req, res) { + // res.json({ custom: 'response' }); + // }); + }, - // Can be used to add specific headers - headers: { - // enable CORS - "Access-Control-Allow-Origin": "*", + // Can be used to add specific headers + headers: { + // enable CORS + "Access-Control-Allow-Origin": "*", - // TODO: enable CSP - // CSP header (and its variants per browser) - "Content-Security-Policy": cspDirectives.join(" ; "), - "X-Content-Security-Policy": cspDirectives.join(" ; "), - "X-WebKit-CSP": cspDirectives.join(" ; "), + // TODO: enable CSP + // CSP header (and its variants per browser) + "Content-Security-Policy": cspDirectives.join(" ; "), + "X-Content-Security-Policy": cspDirectives.join(" ; "), + "X-WebKit-CSP": cspDirectives.join(" ; "), - // Other security headers + // Other security headers - // protect against clickjacking: https://en.wikipedia.org/wiki/Clickjacking - // reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options - "X-Frame-Options": "deny", + // protect against clickjacking: https://en.wikipedia.org/wiki/Clickjacking + // reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options + "X-Frame-Options": "deny", - // enable some protection against XSS - // reference: https://www.owasp.org/index.php/List_of_useful_HTTP_headers - "X-Xss-Protection": "1; mode=block", + // enable some protection against XSS + // reference: https://www.owasp.org/index.php/List_of_useful_HTTP_headers + "X-Xss-Protection": "1; mode=block", - // protect against drive-by download attacks and user uploaded content that could be treated by Internet Explorer as executable or dynamic HTML files - // reference: https://www.owasp.org/index.php/List_of_useful_HTTP_headers - "X-Content-Type-Options": "nosniff" - } + // protect against drive-by download attacks and user uploaded content that could be treated by Internet Explorer as executable or dynamic HTML files + // reference: https://www.owasp.org/index.php/List_of_useful_HTTP_headers + "X-Content-Type-Options": "nosniff" } - }); -}; + } +}); +} +; diff --git a/starter/package.json b/starter/package.json index f79b77a63a..7e312529a5 100644 --- a/starter/package.json +++ b/starter/package.json @@ -76,6 +76,7 @@ "server:prod:ci": "http-server dist -p 3000 -c-1 --cors", "server": "npm run server:dev", "start:hmr": "npm run server:dev:hmr", + "start:monitor": "npx mkdirp reports && npm run start -- --env.monitor", "start": "npm run server:dev", "start:aot": "npm run server:aot:dev", "test": "npm run lint && karma start", @@ -117,7 +118,7 @@ "@angular/platform-server": "5.2.10", "@angular/router": "5.2.10", "@mdi/angular-material": "2.2.43", - "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-5a4445e.tgz", + "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-a922e4a.tgz", "@ngrx/store": "5.2.0", "@uirouter/angular": "1.0.1", "@uirouter/visualizer": "6.0.0", @@ -132,8 +133,8 @@ "web-animations-js": "2.3.1" }, "devDependencies": { - "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-5a4445e.tgz", - "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-5a4445e.tgz", + "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-a922e4a.tgz", + "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-a922e4a.tgz", "@types/core-js": "0.9.46", "@types/hammerjs": "2.0.35", "@types/node": "6.0.106",