当我从终端运行'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)
我究竟做错了什么 ?
您应该设置output.path
为绝对目录,它将起作用.
module.exports = { entry: './main.js', output: { path: __dirname + '/', publicPath: './assets/', filename: 'bundle.js' }, ... }