Nodemon:无法解析config 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

尝试这种方法：

"start/dev"："nodemon--watch./config/webpack.config.js--execwebpack开发服务器"，

看看文档上的这条注释，也许它就发生在你身上。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
}

这很好