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

最新推荐文章于 2024-05-09 16:40:15 发布

夏微微～～

最新推荐文章于 2024-05-09 16:40:15 发布

阅读量1.2k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_44576005/article/details/114300050

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

夏微微～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目搭建以及编译时遇到Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的问题

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，内
复制链接

扫一扫