Nodemon: Failed to parse config webpack.config.js

Question

Below are the commands that I have tried and all produce the same error:

Command 1:

"start:dev": "NODE_ENV=development nodemon --inspect --watch config webpack-dev-server --config ./config/webpack.config.js",

Command 2:

"start:dev": "nodemon --watch config webpack-dev-server --config ./config/webpack.config.js",

Command 3:

"start:dev": "nodemon --watch config --exec webpack-dev-server --config ./config/webpack.config.js",

All of them fail with the following error message:

$ yarn start:dev
yarn run v1.7.0
$ nodemon --watch config  --exec webpack-dev-server --config ./config/webpack.config.js
[nodemon] Failed to parse config /Users/rahulshetty/localshiva/react-overall-seed/config/webpack.config.js
SyntaxError: Unexpected token c in JSON at position 0
    at JSON.parse (<anonymous>)
    at /Users/rahulshetty/localshiva/react-overall-seed/node_modules/nodemon/lib/config/load.js:206:23
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Webpack Config:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExcludeEmptyAssetsPlugin = require('html-webpack-exclude-empty-assets-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

function fromRoot(pathName) {
  return path.resolve(__dirname, `../${pathName}`);
}

module.exports = {
  mode: 'development',

  devtool: 'eval-source-map',

  entry: {
    app: './src/app.js',
  },

  output: {
    path: fromRoot('dist'),
    publicPath: '/',
    filename: '[name].[hash:8].js',
    chunkFilename: '[name].[chunkhash].js',
  },

  resolve: {
    alias: {
      src: fromRoot('src'),
    },
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.pcss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: fromRoot('config'),
              },
            },
          },
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: '[hash]-[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin([fromRoot('dist')]),
    // Provide your tagline for the app.
    new webpack.BannerPlugin('The project was built by Rahul Shetty'),
    new webpack.NamedChunksPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
    new HtmlWebpackPlugin({
      title: 'React Seed',
      template: './src/index.html',
      inject: true,
      cache: true,
      showErrors: true,
    }),

    /**
     * Removes empty assets from being added to the html.
     * This fixes some problems with extract-text-plugin with webpack 4.
     */
    new HtmlWebpackExcludeEmptyAssetsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],

  devServer: {
    contentBase: './dist',
    host: '0.0.0.0',
    publicPath: '/',
    hot: true,
    open: true,
    compress: true,
    historyApiFallback: true,
    https: true,
    watchContentBase: true,
    overlay: {
      // Shows a full-screen overlay in the browser when there are compiler errors or warnings
      warnings: true, // default false
      errors: true, // default false
    },
    stats: {
      // Add build date and time information
      builtAt: true,
      env: true,
      // Show performance hint when file size exceeds `performance.maxAssetSize`
      performance: true,
      colors: true,
    },
  },
};

What I am trying to do is reload webpack dev server when webpack config changes. Everything seems to work fine if I just use webpack-dev-server command.

Answer 1

Okay, I figured out how I can make this work. So, below is the command that worked for me:

"start:dev": "nodemon --watch config --exec 'webpack-dev-server --config ./config/webpack.config.js'"

Quotes around the command you wanna execute via nodemon.