在 webpack 捆绑包中运行 Webpack Dev Server

Question

我有一个针对运行Express的Node服务器的webpack配置。如果在生产环境下，入口文件运行Express服务器；如果在开发环境下，它将运行Express服务器和Webpack Dev Server。问题出现在初始化webpack dev server时，它会抱怨Unhandled rejection Error: invalid argument或者找不到路径。webpack dev server中使用的客户端配置当从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()
  ]
}

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');

代码结构

./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)

- AJ_1310

---

你能提供你的 webpack.config.js 文件的链接吗？ - Sean Larkin

好的，我已经包含了配置文件和部分代码结构。还有我得到的错误堆栈。 - AJ_1310

我也遇到了同样的问题。有任何更新吗？ - Bryan Chen

这里有同样的问题，你解决了吗 @AJ_1310？ - Isaac

我不记得全部内容，但我必须做的其中一件事是将path.join替换为path.resolve。 - AJ_1310

Answer 1

webpack.config.js 中的 output.path 应该是绝对路径，例如 /home/user/../。
这种方式可以解决我的bug。

- Yan