webpack-react-ts '--config' 不是内部或外部命令

Question

webpack.base.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devServer: {
        contentBase: '../dist'
    },
    module: {
        rules: [
            {
                test: /\.(j,t)sx?/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['../dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

webpack.dev.js

const { merge } = require('webpack-merge')
const base = require('./webpack.base')
module.exports = merge(base, {
    mode: 'development',
    devtool: 'inline-source-map'
})

webpack.prod.js

const { merge } = require('webpack-merge')
const base = require('./webpack.base')
module.exports = merge(base, {
    mode: 'production',
    devtool: false
})

npm run dev本地可以跑起来，

但是npm run build 就报错了

Answer 1

参考GPT和自己的思路：

根据提问者提供的 webpack 相关配置以及报错截图，可以初步判断问题出在控制台报错信息中 '--config' is not recognized as an internal or external command。这个报错信息提示说无法识别 '--config' 命令，通常出现这个报错信息的原因是在命令行中输入的命令有误或者缺少相关依赖包。针对这个问题，我给出以下几点建议：

1. 检查是否安装了 webpack：首先确认是否全局安装了 webpack，可以在命令行中输入 webpack -v，若能正常输出 webpack 版本号则说明全局安装成功。否则可以通过 npm install webpack -g 命令进行全局安装。

2. 检查 package.json 中的 scripts 配置：在 package.json 文件中，可以通过 scripts 配置项设置命令行脚本，包括启动 webpack、运行测试等。可以检查一下 package.json 中的 scripts 配置，确认是否正确设置了启动 webpack 的命令，例如：

"scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
}

上述 dev 命令表示启动 webpack-dev-server，使用的配置文件为 webpack.dev.js。类似地，build 命令表示使用 webpack 进行打包构建，使用的配置文件为 webpack.prod.js。

1. 检查命令行中的输入格式：在执行命令行命令时，需要确保输入格式正确。例如在执行 npm run build 命令时，需要注意命令中的空格和大小写等。正确的命令应该是 npm run build，其中 build 对应的是 package.json 中的 scripts 配置项。

2. 确认 webpack.config.js 文件是否存在：在执行 webpack 命令时，需要通过 --config 参数指定相应的配置文件。如果执行 webpack --config webpack.prod.js 命令时，webpack.prod.js 文件不存在，则会出现 '--config' is not recognized as an internal or external command 这样的报错信息。因此，需要确认 webpack 配置文件是否存在，并且路径是否正确。

希望以上建议能够对提问者的问题有所帮助，如果还有疑问可以继续追问。