配置webpack-dev-server失败报错，求大侠路见不平

Question

这是我的配置

var webpack          = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var wecpackConfig    = module.exports = {};//　init object

// input
wecpackConfig.entry　 =　{
  app:[
    './app.js',

    './bower_components/ratchet/dist/css/ratchet.css',
    './bower_components/font-awesome/css/font-awesome.css'
  ],
};

wecpackConfig.output = {
  path:'./dist',
  filename: '[name].js'
};//　output

//doc loader
wecpackConfig.module = {
  loaders : [
    { 
      test: /\.css$/, 
      loader: 'style!css'
    },
    { 
      test: /\.vue$/, 
      loader: 'vue'
    },
    { test: /\.js$/, 
      loader: 'babel'
    },
    { 
      test: /\.(eot(|\?v=4.5.0)|woff(|\?v=4.5.0)|woff2(|\?v=4.5.0)|ttf(|\?v=4.5.0)|svg(|\?v=4.5.0))$/, 
      loader: 'file'
    },
  ]
};

wecpackConfig.plugins = [new webpack.HotModuleReplacementPlugin()];
wecpackConfig.entry.app.unshift("webpack-dev-server/client?http://localhost:9999", "webpack/hot/dev-server");
var compiler = webpack(wecpackConfig);
var server = new webpackDevServer(compiler, {
  hot: true
});
server.listen(9999);

这是报错的信息

/home/tigerb/github/easy-vue/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/middleware.js:105
            if(err) throw err;
                    ^
Error: invalid argument
    at pathToArray (/home/tigerb/github/easy-vue/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (/home/tigerb/github/easy-vue/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] (/home/tigerb/github/easy-vue/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:229:25)
    at Compiler.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compiler.emitAssets (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:226:7)
    at Watching.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:54:18)
    at /home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:403:12
    at Compiler.next (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:67:11)
    at Compiler.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:13)
    at Compiler.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:400:9)
    at Compilation.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:577:13)
    at Compilation.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:572:10)
    at Compilation.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:567:9)
    at Compilation.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:563:8)
    at Compilation.applyPluginsAsync (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.seal (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:525:7)
    at Compiler.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compiler.js:397:15)
    at /home/tigerb/github/easy-vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:103:11
    at Compilation.<anonymous> (/home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:445:10)
    at /home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:417:12
    at /home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:332:10
    at /home/tigerb/github/easy-vue/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/home/tigerb/github/easy-vue/node_modules/webpack/node_modules/async/lib/async.js:246:17)
    at /home/tigerb/github/easy-vue/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /home/tigerb/github/easy-vue/node_modules/webpack/lib/Compilation.js:332:10

Answer 1

// webpack.confib.js

var webpack = require("webpack");
var vue = require("vue-loader");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var publicPath = "/static/";
var plugins = [
        new ExtractTextPlugin("style.css"),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    ];

if(process.env.NODE_ENV === 'clean-build'){
    plugins[2] =
        new HtmlWebpackPlugin({
          filename: '../index.html',
          template: './static/template/index.html'
        });
}

var config = {
    entry: {
        app:['./src/main.coffee'],
        vendors: ['vue','jquery','vuex','vue-router']
    },
    output: {
        path: __dirname + publicPath,
        filename: 'app.js',
        publicPath: publicPath,
    },
    module: {
        loaders: [
        {
            test: /\.vue$/,
            loader: 'vue'
        },
        {
            test: /\.coffee$/,
            exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
            loader: 'coffee'
        },
        {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract(
                    "style", "css!less")
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(
                "style-loader", "css-loader?sourceMap!cssnext-loader")
        },
        ]
    },
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("css"),
            less: ExtractTextPlugin.extract("css!less-loader")
        }
    },
    resolve: {
        extensions: ['', '.coffee', '.js'],
    },
    plugins: plugins,
    devtool: "source-map",
};
module.exports = config;

app.coffee

webpack = require 'webpack'
WebpackDevServer = require 'webpack-dev-server'
config = require './webpack.config'

config.entry.app.unshift "webpack-dev-server/client?http://localhost:9090", "webpack/hot/dev-server"

config.plugins.push new webpack.HotModuleReplacementPlugin()

proxy = {}

app = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  historyApiFallback: true,
  hot: true,
});

app.listen(9090);

Answer 2

你应该设置 output.path 是一个绝对路径

output: {
        path: __dirname + '/assets/',
        publicPath: './assets/',
        filename: 'bundle.js'
    },

Answer 3

output 上增加 publicPath

Answer 4

output.path配置的不对，要配置绝对路径，如下：

output: {
    path: __dirname + '/assets/',
    publicPath: './assets/',
    filename: 'bundle.js'
}