title: vuejs npm dev server does not show updated output
body: <p>I am using vuejs in wordpress theme, everything is properly setup and working.</p>
  
  <p><code>npm run build</code> works perfectly and creates dist and wordpress picks up all content from it.</p>
  
  <p>What's the issue then?</p>
  
  <p><code>npm run dev</code> also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.</p>
  
  <p>Please guide and help.</p>
  
  <p>webpack.config.dev.js</p>
  
  <pre><code>    const path = require('path');
  const webpack = require('webpack');
  const StyleLintPlugin = require('stylelint-webpack-plugin');
  const fs = require('fs');
  const autoprefixer = require('autoprefixer');
  
  if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
    fs.renameSync(
      path.resolve(__dirname, '../.env.example'),
      path.resolve(__dirname, '../.env'),
    );
  }
  
  module.exports = (options = {}) =&gt; {
    const config = {
      entry: {
        admin: './src/admin.js',
        public: './src/public.js',
      },
      output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: 'http://localhost:9000/',
        filename: 'js/[name].js',
      },
      module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&amp;sourceMap',
                scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
              },
              preserveWhitespace: false,
              postcss: [autoprefixer()],
            },
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
            exclude: /node_modules/,
          },
          {
            test: /\.js|\.vue$/,
            use: [{
              loader: 'eslint-loader',
              options: {
                configFile: path.resolve(__dirname, '../.eslintrc.json'),
              },
            }, ],
            enforce: 'pre',
            exclude: /node_modules/,
          },
          {
            test: /\.(s)?css$/,
            use: [
              'vue-style-loader?sourceMap',
              'css-loader?sourceMap',
              'postcss-loader?sourceMap',
              'sass-loader?sourceMap',
            ],
          },
          {
            test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
            loader: 'file-loader',
            query: {
              name: '[hash].[ext]',
              outputPath: 'static/',
            },
            exclude: /node_modules/,
          },
          {
            test: /\.json$/,
            loader: 'json-loader',
          },
        ],
      },
      plugins: [
        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer()],
            context: '/',
          },
        }),
        new StyleLintPlugin({
          configFile: path.resolve(__dirname, '../.stylelintrc.json'),
          syntax: 'scss',
          files: ['**/*.s?(a|c)ss', '**/*.vue'],
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
      ],
      devServer: {
        compress: true,
        contentBase: path.join(__dirname, '../dist'),
        headers: {
          'Access-Control-Allow-Origin': 'http://localhost',
        },
        hot: true,
        public: 'localhost:9000',
        port: 9000,
        overlay: {
          errors: true,
          warnings: true,
        },
      },
      devtool: 'eval-source-map',
      externals: {
        jquery: 'jQuery',
      },
      resolve: {
        alias: {
          PublicJSUtilities: path.resolve(
            __dirname,
            '../src/public/js/utilities',
          ),
          PublicCSSAbstracts: path.resolve(
            __dirname,
            '../src/public/css/abstracts',
          ),
          PublicImg: path.resolve(__dirname, '../src/public/img'),
          masonry: 'masonry-layout',
          isotope: 'isotope-layout',
        },
      },
      watch: options.watch === 'true',
    };
  
    return config;
  };
  </code></pre>
  
  <p>webpack.vue.build.js</p>
  
  <pre><code>    const path = require('path');
  const webpack = require('webpack');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const StyleLintPlugin = require('stylelint-webpack-plugin');
  const fs = require('fs');
  const autoprefixer = require('autoprefixer');
  
  if (fs.existsSync(path.resolve(__dirname, '../.env')) === true) {
    fs.renameSync(
      path.resolve(__dirname, '../.env'),
      path.resolve(__dirname, '../.env.example'),
    );
  }
  
  module.exports = () =&gt; {
    const config = {
      entry: {
        admin: './src/admin.js',
        public: './src/public.js',
      },
      output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: '',
        filename: 'js/[name].js',
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                sass: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader?sourceMap',
                  use: 'css-loader?sourceMap!sass-loader?sourceMap',
                }),
                scss: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader?sourceMap',
                  use: 'css-loader?sourceMap!sass-loader?sourceMap',
                }),
              },
              preserveWhitespace: false,
              postcss: [autoprefixer()],
            },
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
          {
            test: /\.js|\.vue$/,
            use: [
              {
                loader: 'eslint-loader',
                options: {
                  configFile: path.resolve(__dirname, '../.eslintrc.json'),
                },
              },
            ],
            enforce: 'pre',
            exclude: /node_modules/,
          },
          {
            test: /\.(s)?css$/,
            loader: ExtractTextPlugin.extract({
              fallback: 'vue-style-loader?sourceMap',
              use: 'css-loader!postcss-loader!sass-loader',
            }),
          },
          {
            test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
            loader: 'file-loader',
            query: {
              name: '[hash].[ext]',
              outputPath: 'static/',
              publicPath: '../',
            },
            exclude: /node_modules/,
          },
        ],
      },
      plugins: [
        new CleanWebpackPlugin(['dist'], {
          root: path.resolve(__dirname, '../'),
          verbose: true,
        }),
        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer()],
            context: '/',
          },
        }),
        new ExtractTextPlugin('css/[name].css'),
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"',
          },
        }),
        new StyleLintPlugin({
          configFile: path.resolve(__dirname, '../.stylelintrc.json'),
          syntax: 'scss',
          files: ['**/*.s?(a|c)ss', '**/*.vue'],
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
      ],
      externals: {
        jquery: 'jQuery',
      },
      resolve: {
        alias: {
          PublicJSUtilities: path.resolve(
            __dirname,
            '../src/public/js/utilities',
          ),
          PublicCSSAbstracts: path.resolve(
            __dirname,
            '../src/public/css/abstracts',
          ),
          PublicImg: path.resolve(__dirname, '../src/public/img'),
          masonry: 'masonry-layout',
          isotope: 'isotope-layout',
        },
      },
    };
  
    return config;
  };
  </code></pre>
  
  <p>Screenshot to get some idea about folder structure:</p>
  
  <p><a href="http://prntscr.com/n0cbg1" rel="nofollow noreferrer">http://prntscr.com/n0cbg1</a></p>