Ausführen eines Webpack Dev-Servers in einem Webpack-Bundle

Question

Ich habe eine Webpack-Konfiguration für einen Knotenserver, der mit Express ausgeführt wird. Wenn die Eintragsdatei in Produktion ist, wird der Express-Server ausgeführt, wenn in der Entwicklung auch der Express Server und ein Webpack Dev Server ausgeführt werden. Das Problem liegt vor, wenn der Webpack-Dev-Server initialisiert wird. Es klagt über Unhandled rejection Error: invalid argument oder nicht gefundene Pfade. Die Client-Konfiguration, die auf dem Webpack-Dev-Server verwendet wird, läuft gut, wenn sie von der CLI selbst verwendet wird. Sie funktioniert auch, wenn der webpackdevserver in einer regulären (nicht gebündelten) Datei initialisiert wird.

Der Unterschied zu jeder Methode besteht darin, dass die Pfade, die aus der Konfiguration gedruckt werden, zwischen den Fällen, die funktionieren, und denen, die nicht funktionieren. Diese Pfade werden aus dem jeweils unterschiedlichen __dirname aufgelöst. Warum könnte der Grund dafür sein, und ist es möglich, den normalen Pfad __dirname zu erhalten?

Vielen Dank im Voraus.

Server Config:

{ 
    target: 'node', 
    entry: rootDirectory, 
    externals: nodeModules,//readDirSync('node_modules').filter(x => x !== '.bin'), 
    output: { 
    path: join(rootDirectory, 'build'), 
    filename: 'index.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }, 
    plugins: [ 
    new DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('development'), 
     'PORT': 8080, 
     'SERVER': true, 
     'CLIENT': false 
     } 
    }) 
    ], 
    node: { 
    __dirname: false, 
    __filename: false 
    } 
}; 

Client-Konfiguration:

{ 
    entry: { 
    client: [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './client' 
    ] 
    }, 
    output: { 
    path: join(rootDirectory, 'public'), 
    filename: 'bundle.js', 
    publicPath: '' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }, 
    plugins: [ 
    // new DefinePlugin({ 
    // 'process.env': { 
    //  'NODE_ENV': JSON.stringify('development'), 
    //  'PORT': 8080, 
    //  'SERVER': false, 
    //  'CLIENT': true 
    // } 
    // }), 
    new HTMLWebpackPlugin({ 
     template: './index.tmp.html', 
     filename: 'index.html', 
     chunks: ['client'] 
    }), 
    new webpack.HotModuleReplacementPlugin() 
    ] 
} 

index.js

import devServer from './devServer'; 
import server from './server'; 

const PORT = process.env.PORT || 8080; 

switch (process.env.NODE_ENV || 'development') { 
    case 'development': devServer(PORT); 
    case 'production': server(PORT - 1); 
} 

devServer.js

// import Express from 'express'; 
import webpack from 'webpack'; 
import WebpackDevServer from 'webpack-dev-server'; 
// import webpackDevMiddleware from 'webpack-dev-middleware'; 
// import webpackHotMiddleware from 'webpack-hot-middleware'; 

import {join} from 'path'; 

import config from './webpack/dev/client.config'; 

export default (PORT) => { 
    // let app = new Express(); 
    let compiler = webpack(config); 
    let serverOptions = { 
    inline: true, 
    hot: true, 
    contentBase: '/public', 
    publicPath: config.output.publicPath, 
    proxy: { 
     '*': `http://localhost:${PORT - 1}` 
    } 
    } 
    let app = new WebpackDevServer(compiler, serverOptions); 
    app.listen(PORT); 
} 

Client.js

console.log('hello world'); 

Codestruktur

./index.js 
./server.js 
./devServer.js 
./client.js 
./webpack/dev/server.config.js 
./webpack/dev/client.js 
./public 
./build 

Fehler-Stack

Unhandled rejection Error: invalid argument 
    at pathToArray (/Users/AJ/Desktop/winebox/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10) 
    at MemoryFileSystem.mkdirpSync (/Users/AJ/Desktop/winebox/node_modules/memory-fs/lib/MemoryFileSystem.js:139:13) 
    at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/AJ/Desktop/winebox/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34) 
    at Compiler.<anonymous> (/Users/AJ/Desktop/winebox/node_modules/webpack/lib/Compiler.js:229:25) 
    at Compiler.next (/Users/AJ/Desktop/winebox/node_modules/tapable/lib/Tapable.js:67:11) 
    at /Users/AJ/Desktop/winebox/node_modules/html-webpack-plugin/index.js:163:9 
    at PassThroughHandlerContext.finallyHandler (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/finally.js:55:23) 
    at PassThroughHandlerContext.tryCatcher (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/util.js:16:23) 
    at Promise._settlePromiseFromHandler (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/promise.js:503:31) 
    at Promise._settlePromise (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/promise.js:560:18) 
    at Promise._settlePromise0 (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/promise.js:605:10) 
    at Promise._settlePromises (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/promise.js:684:18) 
    at Async._drainQueue (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/async.js:126:16) 
    at Async._drainQueues (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/async.js:136:10) 
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/AJ/Desktop/winebox/node_modules/bluebird/js/release/async.js:16:14) 
    at processImmediate [as _immediateCallback] (timers.js:383:17) 

Answer 1

output.path in webpack.config.js sollte absoluter Pfad sein heißt /home/user/../
Das Fehler behoben für mich.