Nodemon:无法解析配置webpack.js

jgovgodb  于 12个月前  发布在  Webpack
关注(0)|答案(4)|浏览(135)

下面是我尝试过的命令,都产生了同样的错误:

命令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命令,一切似乎都很好。

of1yzvn4

of1yzvn41#

好了,我找到了如何让它工作的方法。下面是对我有用的命令:

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

字符串
在你想通过nodemon执行的命令周围加上引号。

kpbpu008

kpbpu0082#

试试这个方法:
“start:dev”:“nodemon --watch./webpack. js--exec webpack-dev-server”,
看看documentation上的这张纸条,也许它正在发生在你身上。

mo49yndu

mo49yndu3#

你可以使用一个名为nodemon.json的配置文件:

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

字符串
这个很好用

kd3sttzy

kd3sttzy4#

检查你的package.json文件,如果你已经编辑了任何东西。当在脚本中添加“dev”时,我遗漏了一个逗号(,)来分隔两个条目,这导致了我的这个错误。

相关问题