526互联

Unable to load '@webpack-cli/serve' command 报错问题

发布时间 2023-06-27 23:29:32作者: 火羽

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
at WebpackCLI.makeCommand (E:\vue-workspace\change-row-color\node_modules\webpack-cli\lib\webpack-cli.js:173:21)
at ServeCommand.apply (E:\vue-workspace\change-row-color\node_modules\@webpack-cli\serve\lib\index.js:41:19)
at loadCommandByName (E:\vue-workspace\change-row-color\node_modules\webpack-cli\lib\webpack-cli.js:907:35)
at async Command.<anonymous> (E:\vue-workspace\change-row-color\node_modules\webpack-cli\lib\webpack-cli.js:1462:17)
at async Promise.all (index 0)
at async WebpackCLI.run (E:\vue-workspace\change-row-color\node_modules\webpack-cli\lib\webpack-cli.js:1500:9)
at async runCLI (E:\vue-workspace\change-row-color\node_modules\webpack-cli\lib\bootstrap.js:11:9)
npm ERR! errno 2
npm ERR! change-row-color@1.0.0 dev: `webpack serve`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the change-row-color@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\soft\nodejs\node_cache\_logs\2023-06-27T12_59_47_312Z-debug.log
PS E:\vue-workspace\change-row-color> npx webpack --version
webpack 5.42.1
webpack-cli 4.7.2

 

应该是版本不兼容导致的

npm install -D webpack-cli   下载最新的 webpack-cli  

 

下载样式加载器

npm i style-loader@3.0.0 css-loader@5.2.6 -D

 

 

const path=require('path')//引入node的模块

const Htmlplugin=require('html-webpack-plugin')
//创建一个htnl插件示例
const htmlplugin=new Htmlplugin({
    template: './src/index.html',
    filename: './index.html'
})


//使用node.js的导出语法，向外导出一个webpack的配置对象
module.exports={
    entry: path.join(__dirname,'./src/index.js'),//指定处理的文件，不指定默认./src/index.js
    //代表webpack运行的模式，可选至有两个 development 和 production (注释会清楚并深度压缩)
    mode:'production',
    //指定生成的文件存放路径
    output: {
        path: path.join(__dirname,'dist'),//指定文件存放目录，
        filename: 'main.js'
    },
    plugins:[htmlplugin],
    devServer: {
        open: true,
        port: 8081
    },
    module:{//第三方模块匹配规则
     rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}]
    }
}