如何在站点上设置两个单独的webpack实例?

时间:2017-12-07 17:16:46

标签: visual-studio reactjs webpack react-router

我在工作中要求有两个独立的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>

0 个答案:

没有答案