下面是我尝试过的命令,它们都产生相同的错误:
命令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
命令,一切似乎都可以正常工作。
答案 0 :(得分:1)
好的,我知道如何进行这项工作。因此,以下是对我有用的命令:
"start:dev": "nodemon --watch config --exec 'webpack-dev-server --config ./config/webpack.config.js'"
在您要通过nodemon执行的命令周围加引号。
答案 1 :(得分:0)
尝试这种方法:
“ start:dev”:“ nodemon --watch ./config/webpack.config.js --exec webpack-dev-server”,
在documentation上查看此注释,也许它与您有关。 Note that if you specify a --config file or provide a local nodemon.json any package.json config is ignored.