javascript - Running a Webpack Dev Server inside a webpack bundle - Stack Overflow

admin管理员组

文章数量:1399269

I have a webpack configuration for a node server running with Express. The entry file if it's in production runs the Express server, if in development also runs the Express Server and a Webpack Dev Server. The problem lies when the webpack dev server is initialized; it plains about Unhandled rejection Error: invalid argument or not found paths. The client configuration that is used in the webpack dev server runs well when used on it's own from the CLI, also it works when the webpackdevserver is initialized in a regular (not-bundled) file.

The difference from each method is the paths that are printed from the configuration are different between the cases that work and the one that doesn't. These paths are resolved from the __dirname which is different in each case. Why could the reason for this be, and is it possible to obtain the normal __dirname path?

Thanks in advance.

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 Config:

{
  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 piler = webpack(config);
  let serverOptions = {
    inline: true,
    hot: true,
    contentBase: '/public',
    publicPath: config.output.publicPath,
    proxy: {
      '*': `http://localhost:${PORT - 1}`
    }
  }
  let app = new WebpackDevServer(piler, serverOptions);
  app.listen(PORT);
}

client.js

console.log('hello world');

code structure

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

Error 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)

I have a webpack configuration for a node server running with Express. The entry file if it's in production runs the Express server, if in development also runs the Express Server and a Webpack Dev Server. The problem lies when the webpack dev server is initialized; it plains about Unhandled rejection Error: invalid argument or not found paths. The client configuration that is used in the webpack dev server runs well when used on it's own from the CLI, also it works when the webpackdevserver is initialized in a regular (not-bundled) file.

The difference from each method is the paths that are printed from the configuration are different between the cases that work and the one that doesn't. These paths are resolved from the __dirname which is different in each case. Why could the reason for this be, and is it possible to obtain the normal __dirname path?

Thanks in advance.

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 Config:

{
  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 piler = webpack(config);
  let serverOptions = {
    inline: true,
    hot: true,
    contentBase: '/public',
    publicPath: config.output.publicPath,
    proxy: {
      '*': `http://localhost:${PORT - 1}`
    }
  }
  let app = new WebpackDevServer(piler, serverOptions);
  app.listen(PORT);
}

client.js

console.log('hello world');

code structure

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

Error 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)

• javascript
• node.js
• express
• webpack
• webpack-dev-server

Share Improve this question Follow edited Mar 11, 2016 at 14:53 AJ_1310 asked Mar 11, 2016 at 5:57 AJ_1310AJ_1310 3,44333 gold badges2222 silver badges2626 bronze badges 5

• Could you provide a link to your webpack.config.js file? – Sean Larkin Commented Mar 11, 2016 at 12:21
• Ok, I included the config files, and some of the code structure. And the error stack I get. – AJ_1310 Commented Mar 11, 2016 at 14:51
• I have same issue. Any updates? – Bryan Chen Commented Mar 23, 2016 at 1:52
• Same issue here, did you manage to figure it out @AJ_1310? – Isaac Commented Jun 24, 2016 at 19:22
• I don't remember the entirety of it, but one of the things that I had to do was replace the path.join for path.resolve – AJ_1310 Commented Jun 25, 2016 at 0:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

output.path in webpack.config.js should be absolute path i.e. /home/user/../
That fixed bug for me.

本文标签： javascriptRunning a Webpack Dev Server inside a webpack bundleStack Overflow