I have created a .NET Core Angular 5 SPA in Visual Studio 2017. I am very confused about the way Webpack works in the above. For example, there are no scripts for Webpack inside package.json:
{
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular/animations": "^5.0.2",
"@angular/cdk": "^5.0.0-rc.1",
"@angular/common": "^5.0.2",
"@angular/compiler": "^5.0.2",
"@angular/compiler-cli": "^5.0.2",
"@angular/core": "^5.0.2",
"@angular/forms": "^5.0.2",
"@angular/http": "^5.0.2",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.2",
"@angular/platform-server": "^5.0.2",
"@angular/router": "^5.0.2",
"@ngtools/webpack": "1.8.3",
"@types/webpack-env": "1.13.2",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.4.0",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.7",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.12",
"expose-loader": "0.7.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"html-loader": "0.5.1",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.7",
"preboot": "5.1.7",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "^5.5.2",
"style-loader": "0.19.0",
"to-string-loader": "1.1.5",
"typescript": "2.6.1",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@types/chai": "4.0.5",
"@types/jasmine": "2.8.2",
"chai": "4.1.2",
"jasmine-core": "2.8.0",
"karma": "1.7.1",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.6"
}
}
Could you please explain to me how Webpack comes into play? Here is the webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
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$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-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.module.browser#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.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
Moreover, there is another file named webpack.config.vendor.js. What exactly is that?
All of the webpack stuff is taken care of by the MSBuild process (and corresponding middleware). In order to find the references you are looking for, take a look at the .csproj file for your project. Here's an example taken from one I have generated:
<Target Name="DebugRunWebpack" BeforeTargets="Build" ... ">
...
<Message Importance="high" Text="Performing first-run Webpack build..." />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js" />
</Target>
The reason for the two config files is simple: one is for your code, assets, etc and the other is for vendor code, assets, etc, including angular, bootstrap and jQuery.