在Webpack包中运行Webpack Dev Server

时间:2016-03-11 05:57:15

标签: javascript node.js express webpack webpack-dev-server

我有一个运行Express的节点服务器的webpack配置。如果生产中的条目文件运行Express服务器,如果在开发中也运行Express Server和Webpack Dev Server。问题出在webpack开发服务器初始化时;它抱怨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()
  ]
}

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)

1 个答案:

答案 0 :(得分:10)

output.path中的

webpack.config.js应该是绝对路径,即/home/user/../
那个修复了我的错误。