webpack报错 [webpack-cli] Unable to load ‘@webpack-cli/serve‘ command

使用webpack-dev-server 插件可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

1、安装 webpack-dev-server

从项目根目录转到cmd运行如下命令，即可在项目中安装此插件

npm install webpack-dev-server@3.11.2 -D

2、配置 webpack-dev-server

        2.1、修改 package.json -> scripts 中的 dev 命令如下：

        

        2.2、运行 npm run dev 命令，重新进行项目的打包，出现错误

        

        [webpack-cli] Unable to load '@webpack-cli/serve' command
        [webpack-cli] TypeError: options.forEach is not a function

        解决方案：

        执行命令：npm install webpack-cli --save-dev

        再次运行 npm run dev 命令

成功解决！

3、在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server 会启动一个实时打包的 http 服务器