@ngtools/webpack about ifdef-loader HOT 15 OPEN

{ 
  rules: [ {
      test: /\.ts$/,
      use: [
          { loader: 'echo-loader?msg=dump' }, // runs last
          { loader: '@ngtools/webpack' },
          { loader: 'ifdef-loader' },         // runs first
      ]
  }],
}

var AuthServiceProvider = AuthService;
///////////////////////
//////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
//////////

var AuthServiceProvider = AuthService;
///////////////////////
console.log('using mock AuthService');
AuthServiceProvider = require('./auth.service.mock').MockAuthServiceProvider;
//////////

rules: [
      {
        test: /\.ts$/,
        loader: ['@ngtools/webpack', 'ifdef-loader?${q}']
      }
    ]

serManagementModule,
PortfolioBookNg2Module,
PRODUCTION ? RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })  : RouterModule.forRoot(routes),
UpgradeModule  

   const uglify = new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
         warnings: false,
         global_defs: { 
            PRODUCTION: true /* or false */,
         }
      }
   });

const path = require("path");
const fs = require("fs");
const querystring = require("querystring");
const chalk = require("chalk");
const webpack = require("webpack");
const merge = require("webpack-merge");
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = (env) => {
	const isDevBuild = !(env && env.prod);
	const srcRoot = "ClientApp";
	console.log(chalk`{cyan.bold Build environment isDev: ${isDevBuild}}`);
	const ifDefOpts = querystring.encode({
		DEV: isDevBuild,
	});
	const extractSass = new ExtractTextPlugin({
		filename: "[name].css",
		disable: isDevBuild
	});
	const sassConfig = extractSass.extract({
		use: [{
			loader: "css-loader", // translates CSS into CommonJS
			options: {
				minimize: !isDevBuild
			}
		}, {
			loader: "sass-loader", // compiles Sass to CSS
			options: {
				includePaths: [
					`./${srcRoot}/assets/styles`,
					`./${srcRoot}/libraries`
				]
			}
		}],
		// use style-loader in development
		fallback: "style-loader" // creates style nodes from JS strings
	});

	// Configuration in common to both client-side and server-side bundles
	const sharedConfig = {
		stats: { modules: false },
		context: __dirname,
		resolve: { extensions: [".js", ".ts"] },
		output: {
			filename: "[name].js",
			publicPath: "dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix
		},
		module: {
			rules: [
				{
					test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: isDevBuild
						? ["awesome-typescript-loader?silent=true", "angular2-template-loader", `ifdef-loader?${ifDefOpts}`]
						: ["@ngtools/webpack", `ifdef-loader?${ifDefOpts}`]
				},
				{ test: /\.html$/, use: "html-loader?minimize=false" },
				{ test: /\.css$/, use: ["to-string-loader", isDevBuild ? "css-loader" : "css-loader?minimize"] },
				{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=1000000" }
			].concat(isDevBuild ? [
				// Plugins that apply in development builds only
				{ test: /\.scss$/, use: sassConfig },
				{ test: /\.js$/, use: ["source-map-loader"], enforce: "pre" }
			] : [])
		},
		plugins: [
			new webpack.DefinePlugin({
				"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || isDevBuild ? "development" : "production")
			}),
			new CheckerPlugin(),
			extractSass
		]
	};

	// Configuration for client-side bundle suitable for running in browsers
	const clientBundleOutputDir = "./wwwroot/dist";
	const clientBundleConfig = merge(sharedConfig, {
		entry: { "main-client": `./${srcRoot}/boot.browser.ts` },
		output: { path: path.join(__dirname, clientBundleOutputDir) },
		plugins: [
			new webpack.DllReferencePlugin({
				context: __dirname,
				manifest: require("./wwwroot/dist/vendor-manifest.json")
			})
		].concat(isDevBuild ? [
			// Plugins that apply in development builds only
			new webpack.SourceMapDevToolPlugin({
				filename: "[file].map", // Remove this line if you prefer inline source maps
				moduleFilenameTemplate: path.relative(clientBundleOutputDir, "[resourcePath]") // Point sourcemap entries to the original file locations on disk
			})
		] : [
				// Plugins that apply in production builds only
				new webpack.optimize.UglifyJsPlugin(),
				new AngularCompilerPlugin({
					tsConfigPath: "./tsconfig.browser.json",
					entryModule: path.join(__dirname, "ClientApp/app/app.module.browser#AppModule"),
					compilerOptions: {
						noUnusedParameters: false,
					},
				})
			])
	});

	let sassBundleConfig;
	if (!isDevBuild) {
		const themes = getThemes(`./${srcRoot}/app`);
		sassBundleConfig = {
			stats: { modules: false },
			context: __dirname,
			output: {
				filename: "[name].css",
				path: path.join(__dirname, clientBundleOutputDir),
				publicPath: "/dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix
			},
			entry: themes,
			module: {
				rules: [
					{ test: /\.scss$/, use: sassConfig }
				]
			},
			plugins: [extractSass]
		};
	}

	// Configuration for server-side (prerendering) bundle suitable for running in Node
	let serverBundleConfig = merge(sharedConfig, {
		entry: { "main-server": `./${srcRoot}/boot.server.ts` },
		plugins: [
			new webpack.DllReferencePlugin({
				context: __dirname,
				manifest: require(`./${srcRoot}/dist/vendor-manifest.json`),
				sourceType: "commonjs2",
				name: "./vendor"
			})
		].concat(isDevBuild ? [] : [
			// Plugins that apply in production builds only
			new AngularCompilerPlugin({
				tsConfigPath: "./tsconfig.server.json",
				entryModule: path.join(__dirname, "ClientApp/app/app.module.server#AppModule"),
				compilerOptions: {
					noUnusedParameters: false,
				}
			})
		]),
		output: {
			libraryTarget: "commonjs",
			path: path.join(__dirname, `./${srcRoot}/dist`)
		},
		target: "node",
		devtool: "inline-source-map"
	});

	if (isDevBuild) {
		// todo: try to change back to "main" only, as it reduces file size drastically - with it @odin pkgs are being loaded twice duplicated (umd/esm).
		serverBundleConfig = merge(serverBundleConfig, {
			resolve: { mainFields: ["main"] },
		});
	}

	return [
		clientBundleConfig,
		serverBundleConfig,
		sassBundleConfig,
	].filter(x => x);
};

// todo: move to build-tools
function getThemes(themePath) {
	let themes = {};
	fs.readdirSync(themePath).forEach(fileName => {
		const fileNameWithPath = path.resolve(themePath, fileName);
		const stat = fs.lstatSync(fileNameWithPath);
		if (stat.isDirectory()) return;
		if (!/\.theme\.scss$/.test(fileName)) return;

		const nameWithoutExt = path.basename(fileName, ".scss");
		themes[nameWithoutExt] = fileNameWithPath;
	});

	return themes;
};

{ test: /\.html$/, use: ["html-loader?minimize=false","echo-loader?msg=html_loader"] },