fix(build): fix sourcemaps in PROD and in DEV

ISSUES CLOSED: #401
NationalBankBelgium · Jun 4, 2018 · c8c5696 · c8c5696
1 parent fce3568
commit c8c5696
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/packages/stark-build/config/webpack.common.js b/packages/stark-build/config/webpack.common.js
@@ -27,7 +27,7 @@ const buildUtils = require("./build-utils");
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = (options) => {
+module.exports = options => {
 	const isProd = options.ENV === "production";
 	const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
 	const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
@@ -182,11 +182,15 @@ module.exports = (options) => {
 				{
 					enforce: "pre",
 					test: /\.ts$/,
-					use: ["tslint-loader"],
-					exclude: [helpers.root("node_modules")],
-					options: {
-						typeCheck: false, // FIXME remove this line once the type checking issues are gone (cfr FIXME above)
-					}
+					use: [
+						{
+							loader: "tslint-loader",
+							options: {
+								typeCheck: false // FIXME remove this line once the type checking issues are gone (cfr FIXME above)
+							}
+						}
+					],
+					exclude: [helpers.root("node_modules")]
 				},
 
 				// Source map loader support for *.js files
@@ -375,7 +379,7 @@ module.exports = (options) => {
 				// log warnings to webpack
 				failOnError: false
 			}),
-			
+
 			/**
 			 * Plugin: CopyWebpackPlugin
 			 * Description: Copy files and directories in webpack.

diff --git a/packages/stark-build/config/webpack.dev.js b/packages/stark-build/config/webpack.dev.js
@@ -69,6 +69,8 @@ module.exports = function(env) {
 		 */
 		target: "web", // <== can be omitted as default is "web"
 
+		devtool: "cheap-module-source-map",
+
 		mode: "development",
 
 		optimization: {
@@ -243,14 +245,15 @@ module.exports = function(env) {
 			 *
 			 * 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:///"
-			}),
+			// FIXME Fix this configuration and disable devtool
+			// 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: WriteFilePlugin

diff --git a/packages/stark-build/config/webpack.prod.js b/packages/stark-build/config/webpack.prod.js
@@ -72,6 +72,8 @@ module.exports = function() {
 
 		mode: "production",
 
+		devtool: "source-map",
+
 		// reference: https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
 		optimization: {
 			removeAvailableModules: true,
@@ -85,7 +87,8 @@ module.exports = function() {
 			concatenateModules: true,
 			runtimeChunk: true,
 			noEmitOnErrors: true,
-			minimizer: [ // minimization libraries to use
+			minimizer: [
+				// minimization libraries to use
 				/**
 				 * Plugin: UglifyJsPlugin
 				 * Description: Minimize all JavaScript output of chunks.
@@ -103,9 +106,11 @@ module.exports = function() {
 
 				new OptimizeCSSAssetsPlugin({})
 			],
-			splitChunks: { // reference: https://webpack.js.org/plugins/split-chunks-plugin/
+			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
+				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[\\/]/,
@@ -130,7 +135,7 @@ module.exports = function() {
 						reuseExistingChunk: true
 					}
 				}
-			},
+			}
 		},
 
 		/**
@@ -292,14 +297,15 @@ module.exports = function() {
 			 *
 			 * 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: true, // default: true
-				sourceRoot: "webpack:///"
-			}),
+			// FIXME Fix this configuration and disable devtool
+			// new SourceMapDevToolPlugin({
+			// 	filename: "[file].map[query]",
+			// 	moduleFilenameTemplate: "[resource-path]",
+			// 	fallbackModuleFilenameTemplate: "[resource-path]?[hash]",
+			// 	module: true, // default: true
+			// 	columns: true, // default: true
+			// 	sourceRoot: "webpack:///"
+			// }),
 
 			/**
 			 * Plugin: MiniCssExtractPlugin
@@ -326,7 +332,7 @@ module.exports = function() {
 				hashFunction: "sha256",
 				hashDigest: "hex",
 				hashDigestLength: 20
-			}),
+			})
 		]
 	});
 };