How to setup two separate webpack instances on a site? - visual-studio

Question

I have a requirement at work to have two separate webpack instances which will essentially handle two different "sites" on the same domain.
Here is my project structure:
App1/
App2/
webpack.config.js
App2-webpack.config.js
Basically, I want to be able to be able to have all routes that start with /App2 use the App2 webpack config file and all other routes be handled by the other webpack file. Both App1 and App2 folders are completely separate instances of react, react router and redux.
I'm using the "ASP.NET Core Web Application" template from visual studio (https://github.com/aspnet/JavaScriptServices) if that helps. I've modified the csproj file and added some more commands for the second webpack bundle:
<Target Name="RunWebpackDebug" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Debug'">
<Exec Command="npm install" />
<Exec Command="webpack --config App2-webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.js" />
</Target>
However I'm getting the error:
The command "webpack --config App2-webpack.config.vendor.js" exited with code 9009.
If I run the offending command in command prompt, I get a more specific error message:
Cannot find module './App2/wwwroot/dist/vendor-manifest.json' at ...
My guess is the fact that I'm trying to use the wwwroot folder inside my App2 folder (to keep the two apps separate) doesn't work (usually the wwwroot folder is in the root folder).
Also, is the intended functionality even possible? Thanks
EDIT: here is my webpack file for the second app:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');
const CopyWebPackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
// Configuration in common to both client-side and server-side bundles
const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader',
options: {
tsConfigFile: 'tsconfig.json'
}
},
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
]
},
plugins: [new CheckerPlugin(),
new CopyWebPackPlugin([{ from: 'static' }])
]
});
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './ClientApp/boot-client.tsx' },
module: {
rules: [
{ test: /\.less$/, exclude: /node_modules/, use: ExtractTextPlugin.extract(['css-loader', 'less-loader']) },
{ test: /\.css$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/, exclude: /node_modules/, use: 'url-loader?limit=25000' },
]
},
output: {
path: path.join(__dirname, clientBundleOutputDir)
},
plugins: [
new ExtractTextPlugin('site.css'),
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
})
] : [])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig(), {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot-server.tsx' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
],
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
const externalConfig = merge(sharedConfig(), {
entry: { 'external-shell-actions': './ClientApp/actions/externalShellActions' },
output: {
path: path.resolve(__dirname, './dist'),
filename: 'external-shell-actions.js',
library: 'externalShellActions',
libraryTarget: 'umd'
}
});
return [clientBundleConfig, serverBundleConfig, externalConfig];
};
And here is my csproj file:
<Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup Label="Globals">
<SccProjectName>SAK</SccProjectName>
<SccProvider>SAK</SccProvider>
<SccAuxPath>SAK</SccAuxPath>
<SccLocalPath>SAK</SccLocalPath>
<TypeScriptToolsVersion>2.3</TypeScriptToolsVersion>
</PropertyGroup>
<PropertyGroup>
<TargetFramework>net462</TargetFramework>
<RuntimeIdentifier>win7-x86</RuntimeIdentifier>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<AssetTargetFallback>$(AssetTargetFallback);portable-net45+win8+wp8+wpa81;</AssetTargetFallback>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<DebugType>portable</DebugType>
<DebugSymbols>True</DebugSymbols>
<PlatformTarget>x86</PlatformTarget>
<OutputPath>bin\Debug\net462\</OutputPath>
<DefineConstants>TRACE;DEBUG;NET462</DefineConstants>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|x86'">
<DebugType>portable</DebugType>
<DebugSymbols>True</DebugSymbols>
<PlatformTarget>x86</PlatformTarget>
<OutputPath>bin\Debug\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
<OutputPath>bin\Release\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='ProductionRelease|AnyCPU'">
<OutputPath>bin\Release\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|x86'">
<OutputPath>bin\Release\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='ProductionRelease|x86'">
<OutputPath>bin\Release\</OutputPath>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="AspNetCore.Antiforgery.Aes" Version="1.0.4" />
<PackageReference Include="AutoMapper" Version="6.1.1" />
<PackageReference Include="log4net" Version="2.0.8" />
<PackageReference Include="Microsoft.AspNetCore" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.ViewCompilation" Version="2.0.0" PrivateAssets="All" />
<PackageReference Include="Microsoft.AspNetCore.Session" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="2.0.0" PrivateAssets="All" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="2.0.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.0.0" PrivateAssets="All" />
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="2.0.0" />
<PackageReference Include="Microsoft.Extensions.Caching.SqlServer" Version="2.0.0" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="2.0.0" />
<PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="2.0.0" />
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" PrivateAssets="All" />
<PackageReference Include="NETStandard.Library" Version="2.0.0" />
</ItemGroup>
<ItemGroup>
<!-- Files not to show in IDE -->
<None Remove="App.POS.View.React.csproj.vspscc" />
<None Remove="App2\Routes.tsx" />
<None Remove="yarn.lock" />
<Compile Remove="ClientApp\components\assets\**" />
<Compile Remove="ClientApp\dist\**" />
<Compile Remove="node_modules\postcss-zindex\postcss-unique-selectors\**" />
<Compile Remove="wwwroot\dist\**" />
<!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
<Content Remove="ClientApp\**" />
<Content Remove="node_modules\postcss-zindex\postcss-unique-selectors\**" />
<Content Remove="wwwroot\dist\**" />
<EmbeddedResource Remove="ClientApp\components\assets\**" />
<EmbeddedResource Remove="ClientApp\dist\**" />
<EmbeddedResource Remove="node_modules\postcss-zindex\postcss-unique-selectors\**" />
<EmbeddedResource Remove="wwwroot\dist\**" />
<None Remove="ClientApp\components\assets\**" />
<None Remove="ClientApp\dist\**" />
<None Remove="node_modules\postcss-zindex\postcss-unique-selectors\**" />
<None Remove="wwwroot\dist\**" />
</ItemGroup>
<ItemGroup>
<None Include="Properties\PublishProfiles\FolderProfile.pubxml.user" />
</ItemGroup>
<ItemGroup>
<Reference Include="System.Configuration" />
</ItemGroup>
<ItemGroup>
<None Update="log4net.config">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
<ItemGroup>
<Folder Include="static\images\" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="ClientApp\actions\01.ts" />
<TypeScriptCompile Include="ClientApp\actions\0.ts" />
<TypeScriptCompile Include="ClientApp\components\1.tsx" />
<TypeScriptCompile Include="ClientApp\components\2.tsx" />
<TypeScriptCompile Include="ClientApp\components\3.tsx" />
<TypeScriptCompile Include="ClientApp\components\4.tsx" />
<TypeScriptCompile Include="ClientApp\components\5.tsx" />
<TypeScriptCompile Include="ClientApp\components\common\6.tsx" />
<TypeScriptCompile Include="ClientApp\components\common\7.tsx" />
<TypeScriptCompile Include="ClientApp\components\8.tsx" />
<TypeScriptCompile Include="ClientApp\components\9.tsx" />
<TypeScriptCompile Include="ClientApp\reducers\10.ts" />
<TypeScriptCompile Include="App2\actions\2.ts" />
<TypeScriptCompile Include="App2\components\Layout.tsx" />
<TypeScriptCompile Include="App2\components\1\1.tsx" />
<TypeScriptCompile Include="App2\components\1\2.tsx" />
<TypeScriptCompile Include="App2\containers\1.tsx" />
<TypeScriptCompile Include="App2\routes.tsx" />
</ItemGroup>
<Target Name="RunWebpackDebug" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Debug'">
<Exec Command="npm install" />
<Exec Command="node_modules\.bin\webpack --config App2-webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.js" />
<Exec Command="node_modules\.bin\webpack --config webpack.config.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.js" />
</Target>
<Target Name="RunWebpackRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Release'">
<Exec Command="npm install" />
<Exec Command="node_modules\.bin\webpack --config App2-webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.production.js --env.prod" />
</Target>
<Target Name="RunWebpackProductionRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'ProductionRelease'">
<Exec Command="npm install" />
<Exec Command="node_modules\.bin\webpack --config App2-webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.production.js --env.prod" />
</Target>
<Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node_modules\.bin\webpack --config App2-webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.vendor.production.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config App2-webpack.config.production.js --env.prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="wwwroot\dist\**; ClientApp\dist\**; App2\dist\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
<ProjectExtensions><VisualStudio><UserProperties package_1json__JSONSchema="http://json.schemastore.org/schema-catalog" /></VisualStudio></ProjectExtensions>
</Project>