当前位置:  开发笔记 > 前端 > 正文

无法用gulp启动webpack-dev-server

如何解决《无法用gulp启动webpack-dev-server》经验,为你挑选了1个好方法。

当我从终端运行'webpack-dev-server'时它运行正常:

$ webpack-dev-server
http://localhost:3333/
webpack result is served from /./assets/
content is served from C:\Users\Komo\Documents\work\training
Hash: e705c984af7e83cbb685
Version: webpack 1.12.9
Time: 8556ms
    Asset    Size  Chunks             Chunk Names
bundle.js  905 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 855 kB [rendered]
...
webpack: bundle is now VALID.

我正试图用gulp开始它:

这是我的gulpfile.js:

var gulp             = require('gulp');
var gutil            = require('gulp-util');
var webpack          = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var webpackConfig    = require('./webpack.config.js');


gulp.task('webpack-dev-server', function (c) {
    var myConfig = Object.create(webpackConfig);

    myConfig.devtool = 'eval';
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        stats: {
            colors: true
        }
    }).listen(myConfig.devServer.port, 'localhost', function (err) {
        if (err) {
            throw new gutil.PluginError('webpack-dev-server', err);
        }
        gutil.log('[webpack-dev-server]', 'http://localhost:3333/index.html');
    });
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['webpack-dev-server']);

和我的webpack.config.js:

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        publicPath: './assets/',
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

我收到以下错误:

$ gulp
[13:56:24] Using gulpfile ~\Documents\work\training\gulpfile.js
[13:56:24] Starting 'webpack-dev-server'...
[13:56:24] [webpack-dev-server] http://localhost:3333/index.html

Error: invalid argument
    at pathToArray (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
    at Compiler. (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:229:25)
    at Compiler.applyPluginsAsync (C:\Users\Komo\Documents\work\training\node_modules\webpack\node_modules\tapable\lib\Tapable.js:60:69)
    at Compiler.emitAssets (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:226:7)
    at Watching. (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:54:18)
    at C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:403:12
    at Compiler.next (C:\Users\Komo\Documents\work\training\node_modules\webpack\node_modules\tapable\lib\Tapable.js:67:11)
    at Compiler. (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\CachePlugin.js:40:4)

我究竟做错了什么 ?



1> ngasull..:

您应该设置output.path为绝对目录,它将起作用.

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname + '/',
        publicPath: './assets/',
        filename: 'bundle.js'
    },
    ...
}

推荐阅读
地之南_816
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有