webpack项目搭建以及编译时遇到Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的问题

最新推荐文章于 2023-11-08 11:25:12 发布
最新推荐文章于 2023-11-08 11:25:12 发布
阅读量1.2k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44576005/article/details/114300050
版权

1、webpack项目搭建

  • 新建一个文件夹，命令行进入文件夹目录，运行npm init命令，根据需要填写项目信息，入口文件为index.js -->如下图所示
    在这里插入图片描述
  • 在进入项目目录安装webpack和webpack-cli
    命令行输入npm install webpack webpack-cli --save-dev，如下图
    在这里插入图片描述
  • 编写项目代码
    添加index.html、index.js、add-content.js，如图
    在这里插入图片描述
    add-content.js有一个write方法向页面输出HelloWorld，内容如下：
function write() {
  document.write('Hello World')
}
var app = {}
app.write = write

export default app;

index.js引用add-content，并调用里面的方法，内容如下：

import app from './add-content.js'

app.write()

index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./dist/bundle.js"></script>
  <title>HelloWorld</title>
</head>
<body>

</body>
</html>

注意，这里index.html引用的是 dist/bundle.js.

  • webpack 打包项目
    命令行输入npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
    打包后项目目录下会增加，dist/bundle.js，此时可以直接运行index.html了

说明：
a. webpack webpack-cli 是在项目目录下安装的无法运行webpack命令，所以使用npx

b. --entry是项目的入口文件，webpack默认入口文件为src/index.js，因此如果和默认一致可以不写该配置项

c. --output-filename 打包后的输出目录 ，webpack默认入口文件为dist/main.js，因此如果和默认一致可以不写该配置项

d. --mode 打包模式，有development、production、none三种模式

  • 每次打包都输入一长串命名太麻烦了，可以在package.json中进行配置
    package.json中的script项添加build

“build”: “webpack --entry=./index.js --output-filename=bundle.js --mode=development”,

这样在命令行输入 npm run dev就可以了

  • 到目前为止已经可以开发了，不过开发过程中每次改动后都需要打包、刷新页面，有些低效，那么webpack-dev-server就很好地解决了这个问题。

安装：npm install webpack-dev-server --save-dev

package.json中的script项添加dev，设置host、port和publicPath

“dev”: “webpack-dev-server --host=172.23.119.121 --port=9006 --publicPath=/dist”,

  • .参数太多可以放在单独的文件里面
    在项目根目录下新建webpack.conifg.js文件，内容如下：
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development',
  devServer: {
    publicPath: '/dist/',
    hot: true,
    compress: true,
    host: '172.23.119.121',
    port: 9006
  }
}

同时修改package.json的scripts:

“build”: “webpack”,
“dev”: “webpack-dev-server”,

webpack默认配置文件为根目录下的webpack.conifg.js，如果指定配置文件可以像下面这样写：

“build”: “webpack --config=./build/config.js”,
“dev”: “webpack-dev-server --config=./build/config.js”,

最后命令行输入 npm run dev即可运行。

2、运行npm run dev遇到的问题：Error: Cannot find module ‘webpack-cli/bin/config-yargs’，如图
在这里插入图片描述
　解决方法：

卸载当前的 webpack-cli 
命令行输入npm uninstall webpack-cli

安装 webpack-cli 3.* 版本
命令行输入 npm install webpack-cli@3 -D
夏微微～～
关注
专栏目录
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
黄金蛋的博客
06-28 391
这里写自定义目录标题1，问题2，解决办法 1，问题 在package.json中 { "name": "test", "version": "1.0.0", "description": "", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack-dev-s
webpack编译时出现报错Error: Cannot find module '@babel/core'
weixin_44214330的博客
04-20 417
具体报错如下： Error: Cannot find module ‘@babel/core’ babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’. 在gi...
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 问题已解决
weixin_55242897的博客
02-21 251
项目场景： 使用webpack打包运行命令 npm run dev后出现如下错误提示： // 当前package.json 文件 “devDependencies”: { “html-webpack-plugin”: “^5.2.0”, “webpack”: “^5.23.0”, “webpack-cli”: “^4.1.0”, “webpack-dev-server”: “^3.11.2” } 问题描述： PS E:\www\wuyaohua\webpack-senior> npm run dev
webpack启动服务报错Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_38914807的博客
02-04 185
安装webpack-dev-server 启动命令 npm install webpack webpack-cli webpack-dev-server -D 默认装的是最新版本啦，本人用的webpack5.0版本。 在package.json中添加 "scripts": { "start": "webpack-dev-server --open", "dev": "webpack --mode development", "build": "webpack --mode pr.
Error: Cannot find module ‘html-webpack-plugin‘
最新发布
m0_64729384的博客
11-08 1371
【代码】Error: Cannot find module ‘html-webpack-plugin‘
Vue2.0 新手填坑攻略 — 从环境搭建到发布
wqs977的博客
05-03 1353
Vue2.0 新手完全填坑攻略—从环境搭建到发布 阅读 14549 收藏 839 2016-10-11 主页： http://139.129.206.76 Jinkey原创 showonne、yubang 技术指导https://github.com/showonnehttps://github.com/yubangDemo 地址:http://
一天一个webpack报错小总结———更新到webpack初阶学完为止
weixin_44158539的博客
12-13 919
webcpack.config.js文件中的相关代码注释 /* webpack.config.js webpack的配置文件 作用：指示webpack干哪些活儿(当你运行webpack时，会加载里面的配置) *重点：所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs */ //resolve：用来拼接绝对路径的方法 const {resolve} = require('path'); module.exports={ //webpack配置
webpack源码解析四
vv_bug
07-12 1587
前言 我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。 DevServer webpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。 我们首先在我们的因
webpack运行报错 webpack-dev-server.... 解决方法
sunshime的博客
07-31 5518
报错情况： The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using y...
webpack——报错Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_43201350的博客
03-18 219
原因： webpack-cli 升级到了 4，不能使用 webpack-dev-server 这个命令去启动了。 解决： 使用 webpack serve 来启动 webpack-dev-server "scripts": { "start": "webpack serve --config ./config/webpack.common.js " }, 或者也可以卸载 webpack-cli 4版本的，然后在指定 3.3 版本安装。 ...
解决报错Cannot find module 'webpack-cli/bin/config-yargs'
热门推荐
sxs7970的博客
03-22 8万+
npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖 安装完成后，执行命令npm run dev 发现报错： Error: Cannot find module 'webpack-cli/bin/config-yargs’ 后来查看一些资料，发现，webpack3.x的版本与webpack-dev-server3.x 的版本不兼容。 在package.js...
Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题
狮子座的男孩
10-12 3138
在项目打包的时候 `npm run build`，控制台报错，并抛出一个 `Cannot find module 'vue-loader/lib/plugin'` 的问题；
error: cannot find module 'webpack-cli/bin/config-yargs'
09-23
如果Webpack CLI没有正确安装或配置，它可能无法找到所需的模块，从而导致出现类似“cannot find module 'webpack-cli/bin/config-yargs'”的错误。 解决这个问题的方法包括： 1. 确认你已经全局安装了webpack-cli...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值