webpack-cli与webpack-dev-server兼容性问题

package.json中webpack版本:

"webpack": "^5.19.0",

"webpack-cli": "^4.4.0",

"webpack-dev-server": "^3.11.2"

npm start报错:Error: Cannot find module 'webpack-cli/bin/config-yargs’

原因webpack-cli 4.4.0 与webpack-dev-server 3.11.2不兼容。后者为当前最高版本

解决方案1:

将webpack.config.js中"start"修改如下:

"scripts": {

"build": "node_modules/.bin/webpack --config webpack.config.js",

"start": "webpack serve --config webpack.config.js --open "

},

解决方案2:

卸载webpack-cli 4.4.0 ,安装webpack 3.3.12(3.X最高版本)

npm uninstall  webpack-cli npm install --save-dev webpack-cli@3.3.12
(0)

相关推荐

  • vue安装和使用

    首先这里记录的是基于安装node.js 的npm安装vue  如果你不是用的node与npm  那就不必往下看了 1.安装node.js这个不多说   百度有很多 2.安装webpack 全局安装we ...

  • 使用webpack搭建环境,全局安装vue项目

    使用webpack搭建环境,全局安装vue项目

  • Vue-Cli脚手架搭建详细步骤

    vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. 1.安装 ...

  • 如何搭建一个vue-cli4+webpack移动端框架?本文详解

    简介 这是基于 vue-cli4 实现的移动端框架,其中包含项目常用的配置,组件封装及webpack优化方法,可供快速开发使用. 技术栈:vue-cli4 + webpack4 + vant + ax ...

  • webpack 和 webpack-cli 安装和使用中出现的问题

    因为国内防火墙的原因,建议首先安装 cnpm: 使用 npm install cnpm -g 或者 npm install -g cnpm --registry=https://registry.np ...

  • 基于 Vue 的 Electron 项目搭建

    Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-cli ...

  • Webpack如何打包才能尽可能的缩小体积(详解)

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 从图中我们可以看出,Webpack 可以将多种静态资源 js.css ...

  • 手写一个webpack,看看AST怎么用

    Vue中文社区 以下文章来源于进击的大前端 ,作者蒋鹏飞 Dennis 进击的大前端前端工程师,2020年开始写博客.一年时间成为掘金"优秀作者",思否2020年度"To ...

  • (59条消息) 不使用webpack 不用编译 也能使用 vue组件,单文件vue: ,那就是使用 http

    上週在 Vue 社群圈有個令人興奮的熱門新聞: CodePen 可以支援 .vue 檔案了! Check it out - you can use `.vue` files in CodePen Pr ...

  • 初窥Web前端工程化:web-pack核心组件设计

    上期回顾 先来回顾一下,在上期内容里,川哥为我们揭示了当下前端编译打包工具都是运行再Node环境下的,开发者是离不开编辑器IDE.编译打包这些工具. 但如何离开Node环境,前端开发者又该怎么办呢,此 ...

  • Webpack最详解

    WEB前端开发社区 昨天 JavaScript模块打包的概念已经出现一段时间了.RequireJS在2009年首次发声,之后Browserify粉墨登场.接着各种打包工具如雨后春笋纷纷涌现.而webp ...

  • Web 性能优化: 使用 Webpack 分离数据的正确方法

    WEB前端开发社区 昨天 制定向用户提供文件的最佳方式可能是一项棘手的工作. 有很多不同的场景,不同的技术,不同的术语. 在这篇文章中,我希望给你所有你需要的东西,这样你就可以: 了解哪种文件分割策略 ...

  • 用Yeoman + gulp + webpack 来管理你的前端项目

    核心依然是plugin !Webpack出口文件即Gulp入口文件 这里也只是讲如何写一个初略的gulpfile.js 核心便是task,src,start,watch等api,详细说明见官网Gulp ...

  • webpack配置项目

    一.项目初始化 npm init -y npm install --save-dev webpack npm install webpack-cli -D 创建 webpack.config.js文件 ...

  • webpack 5 带来的全新改变

    安装 webpack-dev-server npm install webpack-dev-server -D 在 webpack配置文件中配置服务: devServer:{ port: 8080, ...

  • 大白话理解Webpack!

    一.背景 Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候,我们会通过文件划分的形式实现模块化,也就是将每个功能及其相关状态数据各自单独放 ...