我在工作中要求有两个独立的webpack实例,这些实例将基本上处理两个不同的网站"在同一个域名上。
这是我的项目结构:
App1/
App2/
webpack.config.js
App2-webpack.config.js
基本上,我希望能够让所有以/ App2开头的路由使用App2 webpack配置文件,所有其他路由都由其他webpack文件处理。 App1和App2文件夹都是完全独立的反应实例,反应路由器和redux。
我正在使用" ASP.NET核心Web应用程序"视觉工作室(https://github.com/aspnet/JavaScriptServices)的模板,如果有帮助的话。我修改了csproj文件,并为第二个webpack包添加了一些命令:
<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>
但是我收到了错误:
The command "webpack --config App2-webpack.config.vendor.js" exited with code 9009.
如果我在命令提示符下运行违规命令,我会收到一条更具体的错误消息:
Cannot find module './App2/wwwroot/dist/vendor-manifest.json' at ...
我的猜测是,我尝试在我的App2文件夹中使用wwwroot文件夹(以保持两个应用程序分开)并不起作用(通常wwwroot文件夹位于根文件夹中)。
此外,预期的功能是否可行?感谢
编辑:这是我的第二个应用程序的webpack文件:
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];
};
这是我的csproj文件:
<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>