Webpack on Windows fails loading plugins - angularjs

Question

Good evening,
I'm working on a project written in NodeJS. It uses an express server and many other dependencies like angular, googlemaps, tika, karma, etc.
A few weeks ago I've got the order to make the webpage (localhost) faster by implementing webpack. It bundles all stylesheets and scripts into one file.
After a lot of work to solve all dependencies I've got the app running even though many errors couldn't be found with google. e.g. "java" is a sub dependency which calls "node-gyp rebuild" which is doomed to failure on windows because node-gyp need python and c++ compiler. After installing Windows SDK, VS 2015, etc. I could fix this problem switching to the 32 bit version of node (instead of 64 bit).
After repairing all dependencies I switched to the 64 bit version to solve another problem. The webpack config is due to the amount of dependencies (which needs "alias" entries) quite long.
Two weeks ago I started to implement a developer mode so you can change code and webpack-dev-server automatically rebuilds the bundle file. Therefore I followed a tutorial from SurviveJS.
I've got it easily running after the tutorial. But for a presentation I wanted to clone the Github repository and install all dependencies a second time so I can be sure that the project works. But this time a new error appeared when I was running webpack or webpack-dev-server which couldn't be solved with my previous tricks:
Path_to_project\demo\n2o>..\node_modules\.bin\webpack --config webpack.config.js
Error: No module factory available for dependency type: ModuleDependency
at Compilation.addModuleDependencies (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:181:20)
at Compilation.processModuleDependencies (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:170:7)
at Compilation.moduleReady (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:412:9)
at Compilation.<anonymous> (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:408:16)
at Path_to_project\demo\node_modules\webpack\lib\Compilation.js:123:4
at Array.forEach (native)
at callback (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:122:12)
at Compilation.<anonymous> (Path_to_project\demo\node_modules\webpack\lib\Compilation.js:140:10)
at DependenciesBlock.<anonymous> (Path_to_project\demo\node_modules\webpack\lib\NormalModule.js:115:10)
at DependenciesBlock.onModuleBuild (Path_to_project\demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (Path_to_project\demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at Path_to_project\demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (Path_to_project\demo\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at Path_to_project\demo\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:76:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
When I remove all plugins from the webpack config the error disappears but obviously running the app fails because the angular-webpack-plugin is missing and most of the dependencies are not loaded by webpack. What could be the reason for this failure? I tried different versions of webpack (1.12.2 worked out for me after discovering this fix in an issue on Github) and webpack-dev-server.
I would appreciate your help,
Thomas Kellermeier
Files (webpack.config.js, package.json):
webpack.config.js (webpack)
The settings for webpack-dev-server are at the end of the config
var path = require('path');
var AngularPlugin = require('angular-webpack-plugin');
var webpack = require("webpack");
require("css-selector-tokenizer");
var merge = require('webpack-merge');
const TARGET = process.env.npm_lifecycle_event;
common = {
entry: 'n2o',
output: {
path: 'public/app',
filename: 'n2o.min.js',
publicPath: 'app/'
},
externals: {
"jquery": "jQuery"
},
resolve: {
root: [
// Directories containing modules
path.resolve('public'),
path.resolve('public', 'assets/libs'),
path.resolve('public', 'components'),
path.resolve('public', 'components/settings'),
path.resolve('public', 'components/splitapp'),
path.resolve('public', 'components/register'),
path.resolve('public', 'shared/postContent'),
path.resolve('public', 'shared'),
// Needed for webpack-dev-server modules
path.resolve('public', '../../node_modules')
],
modulesDirectories:['public/assets/libs'],
'dev-tool':'eval',
alias: {
// Replace module names with belonging file names
n2o$: 'app.module',
ngFileUpload$: 'ng-file-upload',
toaster$: 'angularjs-toaster',
ngCookies$: 'angular-cookies',
'ui.router$': __dirname+'/public/assets/libs/angular-ui-router/release/angular-ui-router.js',
'jQuery$': __dirname+'/public/assets/libs/jquery/dist/jquery.js',
registration$: 'register',
ngAnimate$: 'angular-animate',
'mm.foundation$': __dirname+'/public/assets/libs/angular-foundation/mm-foundation.js',
vcRecaptcha$:'angular-recaptcha',
filters$: 'postContentController',
'cfp.hotkeys$':'angular-hotkeys',
'angulartics.google.analytics$':__dirname+'/public/assets/libs/angulartics/dist/angulartics-ga.min.js',
splitapp$:'splitappController',
register$:'registerController',
'ngTouch$':'angular-touch',
'ui-rangeSlider$':__dirname+'/public/assets/libs/angular-rangeslider/angular.rangeSlider.js',
ngSanitize:'angular-sanitize',
settingsModule: 'settingsMasterController',
ngTagsInput$:'ng-tags-input',
'chart.js$':'angular-chart.js',
// Webpack-dev-server dependency
'inherits':__dirname+'\\..\\node_modules\\inherits',
n2o: path.resolve('public'),
ngRoute$: 'angular-route'
}
},
module: {
loaders: [{
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file'
}, {
// Allow loading html through js
test: /\.html$/,
loader: 'raw'
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.json$/,
loader: "json-loader"
}]
},
plugins: [
// Make angular variable available, take angular.module() as requires and
// resolve modules using angular conventions.
new AngularPlugin()
]
};
// For using the development mode the webpack-dev-server has to run with
// following config.
if(TARGET === 'start-dev-server' || !TARGET) {
common.output.publicPath = 'http://localhost:9090/app/'
module.exports = merge(common, {
devtool: 'eval-source-map',
debug: true,
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
quiet: true,
host: process.env.HOST,
port: '9090'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
})
} else {
module.exports = merge(common, {
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: false,
mangle: false,
compress: {
warnings: false
}
})
]
})
}
package.json (dependencies)
[...]
"scripts": {
"compile-production": "webpack --config webpack.config.js",
"start-dev-server": "webpack-dev-server --config webpack.config.js",
"start-dev-mode": "start node n2o/app.js & npm run start-dev-server",
"install-webpack": "npm install webpack#1.12.2 -g & npm install webpack-dev-server#1.14.0 -g",
[...]
},
"dependencies": {
"MD5": "^1.2.1",
"adm-zip": "^0.4.7",
"aws-sdk": "^2.1.34",
"body-parser": "^1.9.2",
"bower": "^1.3.1",
"compression": "^1.5.0",
"cookie-parser": "^1.3.3",
"elasticsearch": "^9.0.0",
"express": "^4.10.1",
"express-session": "^1.10.2",
"facebook-node-sdk": "^0.2.0",
"get-down": "^0.5.0",
"gnip": "~0.2.1",
"googlemaps": "^0.1.20",
"hdb": "^0.4.1",
"html-pdf": "^1.2.0",
"json2csv": "^2.2.1",
"limiter": "^1.0.5",
"lodash": "^3.7.0",
"mocha": "~2.2.1",
"moment": "^2.9.0",
"morgan": "^1.4.1",
"multer": "~0.1.8",
"node-ipc": "^1.1.13",
"node-tika": "^0.0.1",
"oauth": "^0.9.12",
"oauth-request": "0.0.1",
"passport": "^0.2.2",
"passport-local": "~1.0.0",
"phantom": "*",
"q": "^1.1.2",
"request": "^2.53.0",
"response-time": "^2.3.1",
"sanitize-html": "^1.6.1",
"string-format": "^0.5.0",
"stylus": "0.42.3",
"swig": "^1.4.2",
"tika": "^1.3.0",
"tough-cookie": "^0.12.1",
"twin-bcrypt": "^2.1.1",
"twit": "^1.1.20",
"underscore": "~1.8.2",
"unzip": "^0.1.11",
"webdriver-manager": "^7.0.1",
"winston": "^0.9.0"
},
"devDependencies": {
"angular-webpack-plugin": "0.0.3",
"babel-loader": "^5.3.2",
"bower-webpack-plugin": "^0.1.8",
"chai": "^1.10.0",
"chai-as-promised": "^4.1.1",
"css-loader": "^0.21.0",
"css-selector-tokenizer": "^0.5.4",
"exports-loader": "^0.6.2",
"file-loader": "^0.8.4",
"jasmine-node": "~1.14.5",
"json-loader": "^0.5.2",
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-coverage": "~0.3.1",
"karma-firefox-launcher": "~0.1.4",
"karma-jasmine": "^0.1.5",
"ng-annotate-webpack-plugin": "^0.1.2",
"protractor": "^1.7.0",
"raw-loader": "^0.5.1",
"should": "^5.0.0",
"style-loader": "^0.12.3",
"supertest": "^0.15.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.3.2"
}
[...]