在 webpack 包中运行 Webpack 开发服务器

Posted 2023-03-08

【中文标题】在 webpack 包中运行 Webpack 开发服务器

【英文标题】：Running a Webpack Dev Server inside a webpack bundle

【发布时间】：2016-06-26 06:56:32

【问题描述】：

我有一个使用 Express 运行的节点服务器的 webpack 配置。入口文件如果在生产中运行 Express 服务器，如果在开发中也运行 Express Server 和 Webpack Dev Server。问题出在 webpack 开发服务器初始化的时候；它抱怨Unhandled rejection Error: invalid argument 或找不到路径。在 webpack 开发服务器中使用的客户端配置在 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)

【问题讨论】：

您能否提供指向您的webpack.config.js 文件的链接？

好的，我包含了配置文件和一些代码结构。还有我得到的错误堆栈。

我有同样的问题。有更新吗？

同样的问题，你解决了吗@AJ_1310？

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

【参考方案1】：

webpack.config.js 中的output.path 应该是绝对路径，即/home/user/../ 为我修复了这个错误。