Setup-Webpack mit serverseitigem Rendering zum Laden von Sass-Dateien im asp.net-Kernprojekt

Question

Ich benutze eine Yeoman-Projektvorlage namens "aspnetcore-spa", die eine ASP.net Core 1-Vorlage in Verbindung mit großen SPA-Frameworks ist (Angular2 und Reagieren).

Ich habe ein Projekt mit Angular2 erstellt. Der Code der Bio-Platte funktioniert gut und es gibt kein Problem. Sobald ich den Sass-Loader zu webpack.config.js hinzugefügt habe und einen Verweis auf die Sass-Datei aus jeder eckigen Datei gemacht habe.

In webpack.config.js:

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var nodeExternals = require('webpack-node-externals'); 
var merge = require('webpack-merge'); 
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; 

// Configuration in common to both client-side and server-side bundles 
var sharedConfig = { 
    resolve: { extensions: [ '', '.js', '.ts' ] }, 
    output: { 
     filename: '[name].js', 
     publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, 
      { test: /\.scss$/,include:/ClientApp/, loaders: ["style", "css", "sass"] }, 
      { test: /\.html$/,include: /ClientApp/, loader: 'raw' }, 
      { test: /\.css$/, loader: 'to-string!css' }, 
      { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } 
     ] 
    } 
}; 

// Configuration for client-side bundle suitable for running in browsers 
var clientBundleOutputDir = './wwwroot/dist'; 
var clientBundleConfig = merge(sharedConfig, { 
    entry: { 'main-client': './ClientApp/boot-client.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.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin() 
    ]) 
}); 

// Configuration for server-side (prerendering) bundle suitable for running in Node 
var serverBundleConfig = merge(sharedConfig, { 
    entry: { 'main-server': './ClientApp/boot-server.ts' }, 
    output: { 
     libraryTarget: 'commonjs', 
     path: path.join(__dirname, './ClientApp/dist') 
    }, 
    target: 'node', 
    devtool: 'inline-source-map', 
    externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules 
}); 

module.exports = [clientBundleConfig, serverBundleConfig]; 

In meiner Komponente:

npm install node-sass sass-loader --save-dev 

Ich habe überprüft:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-wine', 
    template: require('./wine.component.html'), 
    styles: require('./wine.component.scss') 
}) 
export class WineComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

ich bereits npm Pakete relevant für Sass Loader installiert haben die Datei main-server.js im Ordner wwwroot/dist, die das Ergebnis der Webpack-Bündelung ist, sah ich, dass die .scss-Datei ich s geladen und die Stile werden korrekt verarbeitet. Sobald ich die App though, zeigt diese Ausnahme, die von der serverseitigen Rendering-Seite kommt:

Eine nicht behandelte Ausnahme trat während der Verarbeitung der Anfrage auf.

Ausnahme: Aufruf des Node-Moduls mit Fehler fehlgeschlagen: ReferenceError: Fenster ist nicht definiert unter E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 573: 31 um E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 568: 48 in module.exports (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 590: 69) bei Object. (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 526: 38) unter webpack_require (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 20: 30) unter E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 501: 22 bei Object.module.exports (E: \ Dev \ MeineApp \ MyAppCore \ src \ MeineApp.Web \ ClientApp \ dist \ Hauptserver.js: 506: 3) um webpack_require (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 20: 30) bei Objekt. (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 129: 25) unter webpack_require (E: \ Dev \ MyApp \ MyAppCore \ src \ MyApp.Web \ ClientApp \ dist \ main-server.js: 20: 30)

Es ist offensichtlich wegen des serverseitigen Renderings des Webpacks, da es den Code auf der Seite Node.js (über ASP.net Core's Javascript Services) und dort ausführt ist ein Code, der mit dem Objekt DOM window gekoppelt ist, das auf Knoten nicht gültig ist.

Irgendwelche Hinweise?

Answer 1

ich es geschafft, das Problem zu beheben, ist hier das web.config.js Bit:

(Beachten Sie die Lader .scss Dateien)

module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, 
      { test: /\.scss$/,include:/ClientApp/, loaders: ["to-string", "css", "sass"] }, 
      { test: /\.html$/,include: /ClientApp/, loader: 'raw' }, 
      { test: /\.css$/, loader: 'to-string!css' }, 
      { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } 
     ] 
    } 

Und in der Winkelkomponente änderte ich die Stile dies:

(ein Array von CSS-Dateien erforderlich Bestanden statt einer einzigen CSS-Datei)

@Component({ 
    selector: 'app-wine', 
    template: require('./wine.component.html'), 
    styles: [require('./wine.component.scss')] 
})