javascript - 在 webpack bundle 中运行 Webpack Dev Server

Question

我有一个运行 Express 的 Node 服务器的 webpack 配置。入口文件如果在生产中运行 Express 服务器，如果在开发中也运行 Express Server 和 Webpack Dev Server。问题出在 webpack dev server 初始化的时候；它提示 Unhandled rejection Error: invalid argument 或找不到路径。 webpack dev 服务器中使用的客户端配置在 CLI 中单独使用时运行良好，当 webpackdevserver 在常规(未捆绑)文件中初始化时也可以正常工作。

每种方法的不同之处在于，从配置中打印的路径在有效和无效的情况下是不同的。这些路径是从 __dirname 解析的，在每种情况下都不同。为什么会这样，能否获取到正常的__dirname路径？

提前致谢。

服务器配置:

{
  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
  }
};

客户端配置:

{
  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()
  ]
}

索引.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);
}

开发服务器.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);
}

客户端.js

console.log('hello world');

代码结构

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

错误栈

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

webpack.config.js 中的

output.path 应该是绝对路径，即 /home/user/../
那个为我修复的错误。