Multi tool use

Clash Royale CLAN TAG

Passing --env.prod Value to Webpack 4 with Visual Studio 2017 SPA

I am trying to upgrade my SPA to Angular 6 (which is based on the Visual Studio 2017 SPA).

I in my package.json i have the following;

package.json

{
"name": "mjyproject",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"@angular/animations": "^4.4.7",
"@angular/common": "^4.4.7",
"@angular/compiler": "^4.4.7",
"@angular/compiler-cli": "^4.2.6",
"@angular/core": "^4.4.7",
"@angular/forms": "^4.4.7",
"@angular/http": "^4.4.7",
"@angular/platform-browser": "^4.4.7",
"@angular/platform-browser-dynamic": "^4.4.7",
"@angular/platform-server": "^4.4.7",
"@angular/router": "^4.4.7",
"@ngtools/webpack": "1.5.0",
"@types/chai": "4.0.1",
"@types/hammerjs": "2.0.35",
"@types/jasmine": "2.5.53",
"@types/mousetrap": "1.6.0",
"@types/webpack-env": "1.13.0",
"agm-core": "1.0.0-beta.5",
"ajv": "^6.5.2",
"angular-modal-gallery": "5.7.1",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"angular2-useful-swiper": "5.0.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "^4.0.1",
"aws-sdk": "2.276.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "^2.2.3",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "^2.0.4",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "3.0.0",
"mousetrap": "1.6.2",
"ngx-bootstrap": "^2.0.5",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "^5.0.1",
"style-loader": "0.18.2",
"swiper": "3.4.2",
"to-string-loader": "1.1.5",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "4.1.1",
"zone.js": "0.8.12"
},
"dependencies": {
"latest-version": "^4.0.0"
}
}


Then I have upgraded the webpack.config.js file to the following;

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
//const AotPlugin = require('@ngtools/webpack').AotPlugin;
const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
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: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
{ 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=25000' }
]
},
plugins: [new CheckerPlugin()]
};

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/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 AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});

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

return [clientBundleConfig, serverBundleConfig];
};


This has been upgraded to use the AngularCompilerPlugin.

AngularCompilerPlugin

Now I can run

webpack --config ./webpack.config.js

webpack --config ./webpack.config.js

however, in webpack 4 I cannot see how to integrate the new mode: 'production' to the web.config.js, per the link for the documentation

mode: 'production'

webpack documentation

I assume I could add;

mode: isDevBuild ? 'development : 'production',


However I have the following issues;

env.prod

webpack

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.