CODEWITHSUNDEEP
javascriptnode.jsvue.jswebpackvuejs2
Peter
Peter

Reputation: 804

vuejs npm dev server does not show updated output

I am using vuejs in wordpress theme, everything is properly setup and working.

npm run build works perfectly and creates dist and wordpress picks up all content from it.

What's the issue then?

npm run dev also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.

Please guide and help.

webpack.config.dev.js

    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 = {}) => {
  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&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;
};

webpack.vue.build.js

    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 = () => {
  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;
};

Screenshot to get some idea about folder structure:

http://prntscr.com/n0cbg1

Upvotes: 2

Views: 707

Answers (1)

Ali Hallaji
Ali Hallaji

Reputation: 4392

add --watch in start field in package.json file. or use this command for executing:

npm run build -- --watch

Upvotes: 3

Related Questions