Vue JS dev server doesn't work in Atom

Question

I started my website project in Visual Studio Code and it worked fine for days. I found out about Atom and decided to move over to it. Somehow whenever I start the dev server in Atom, each Vue component spits out:

Console output (pastebin)

"Error: "extract-text-webpack-plugin" loader is used without the corresponding 
plugin"

and the webpage only renders

Cannot GET /

The dev server starts fine in Visual Studio Code but not in Atom

Answer 1

I had the same problem with running npm run dev from CMD on Win7. I dont know, as I did not require this plugin anywhere explicitly and when I started this error did not occure to me.

As i also started to get this error and I already tried setting NODE_ENV=development provided by this issue report from the official repo , I tried playing around.

Finally i ended up editing the webpack.dev.conf.js adding this specific plugin to the plugins key as follows:

// File header with other Imports
var utils = require('./utils')
// ...
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// Then in Module definition
module.exports = merge(baseWebpackConfig, {

    // ... other keys for module

    plugins: [

      // .. other plugins

      // .. I copied this line from the webpack.prod.conf.js
      new ExtractTextPlugin({
         filename: utils.assetsPath('css/[name].[contenthash].css')
      }),

Well there might be better and more beautiful solutions. This is just the one that seems to fix it for me. As I am new to VueJs and I am only using the dev server at the moment with autoreload, other answeres might be bit more polished.