Nodemon:未能解析配置webpack.config.js

Question

下面是我尝试过的命令，它们都会产生相同的错误：

命令1:

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

命令2:

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

命令3:

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

如果出现以下错误消息，它们都会失败：

$ 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：

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,
    },
  },
};

当webpack配置发生变化时，我要做的是重新加载webpack dev server。如果我只使用webpack-dev-server命令，一切看起来都很好。

Answer 1

好吧，我想出了如何让这件事成功的办法。下面是对我有用的命令：

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

引用您想要通过nodemon执行的命令。

Answer 2

试试这种方法：

“开始:开发”："nodemon ./config/webpac.config.js --exec webpack-dev-server"，

看看文档上的这张便条，也许是在你身上发生的。Note that if you specify a --config file or provide a local nodemon.json any package.json config is ignored.

Answer 3

您可以使用名为nodemon.json的配置文件。

{
  "watch": ["webpack.common.js", "webpack.dev.js"],
  "exec": "webpack serve --config webpack.dev.js",
  "verbose": false
}

这个很好用