In aspnet-webpack, replace ExternalsPlugin with webpack-node-externals because of #132

SteveSandersonMS · SteveSandersonMS · commit 80343e9f1749 · 2016-09-20T15:41:06.000+01:00
diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/package.json b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aspnet-webpack",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Helpers for using Webpack in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {
@@ -10,12 +10,12 @@
   "author": "Microsoft",
   "license": "Apache-2.0",
   "dependencies": {
-    "es6-promise": "^3.1.2",
     "connect": "^3.4.1",
+    "es6-promise": "^3.1.2",
     "memory-fs": "^0.3.0",
     "require-from-string": "^1.1.0",
     "webpack-dev-middleware": "^1.6.1",
-    "webpack-externals-plugin": "^1.0.0"
+    "webpack-node-externals": "^1.4.3"
   },
   "devDependencies": {
     "tsd": "0.6.5",
diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/LoadViaWebpack.ts b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/LoadViaWebpack.ts
@@ -9,10 +9,9 @@ import * as webpack from 'webpack';
 import { requireNewCopy } from './RequireNewCopy';
 
 // Strange import syntax to work around https://github.com/Microsoft/TypeScript/issues/2719
-import { webpackexternals } from './typings/webpack-externals-plugin';
 import { requirefromstring } from './typings/require-from-string';
 import { memoryfs } from './typings/memory-fs';
-const ExternalsPlugin = require('webpack-externals-plugin') as typeof webpackexternals.ExternalsPlugin;
+const nodeExternals = require('webpack-node-externals');
 const requireFromString = require('require-from-string') as typeof requirefromstring.requireFromString;
 const MemoryFS = require('memory-fs') as typeof memoryfs.MemoryFS;
 
@@ -59,9 +58,19 @@ function loadViaWebpackNoCache<T>(webpackConfigPath: string, modulePath: string)
 
         // In Node, we want anything under /node_modules/ to be loaded natively and not bundled into the output
         // (partly because it's faster, but also because otherwise there'd be different instances of modules
-        // depending on how they were loaded, which could lead to errors)
-        webpackConfig.plugins = webpackConfig.plugins || [];
-        webpackConfig.plugins.push(new ExternalsPlugin({ type: 'commonjs', include: /node_modules/ }));
+        // depending on how they were loaded, which could lead to errors).
+        // ---
+        // NOTE: We have to use webpack-node-externals rather than webpack-externals-plugin because
+        // webpack-externals-plugin doesn't correctly resolve relative paths, which means you can't
+        // use css-loader, since tries to require('./../../node_modules/css-loader/lib/css-base.js') (see #132)
+        // ---
+        // So, ensure that webpackConfig.externals is an array, and push WebpackNodeExternals into it:
+        let externalsArray: any[] = (webpackConfig.externals as any[]) || [];
+        if (!(externalsArray instanceof Array)) {
+            externalsArray = [externalsArray];
+        }
+        webpackConfig.externals = externalsArray;
+        externalsArray.push(nodeExternals());
 
         // The CommonsChunkPlugin is not compatible with a CommonJS environment like Node, nor is it needed in that case
         webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/typings/webpack-externals-plugin.d.ts b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/typings/webpack-externals-plugin.d.ts
diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/typings/webpack-node-externals.d.ts b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/typings/webpack-node-externals.d.ts
@@ -0,0 +1,2 @@
+declare module 'webpack-node-externals' {
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+declare module 'webpack-node-externals' {`
	`2`	`+}`