WebPack4.0 报 The 'mode' option has not been set以及Can't resolve './src'解决方法?

**

安装webpack

**
1,桌面新建一个webpack-demo文件夹,点击进入文件webpack-test夹 按下shift+鼠标右键 点击在此处打开命令窗口,如图
这里写图片描述
2,安装之前确保node已经安装,可以通过node -v来查看node安装的情况和版本,如果没有按装node,先安装node才可以继续进行,安装 npm install -g webpack

 //全局安装
 npm install -g webpack

如果你这时安装失败了(出现了报错信息),原因如下:

  • 检查你node的版本号,如果版本号过低,升级为最新版本。
  • 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习淘宝镜像

3,在命令行继续输入:npm init 一直点击回车键 当出现Is this ok?时 输入yes,然后点击回车键
这里写图片描述

4,这时可以进入webpack-demo文件,出现package.json文件 如图:
这里写图片描述
5,这时可以用我们的编译器打开项目:
打开package.json文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

6,继续在命令行窗口 输入 npm install –save-dev webpack

npm install --save-dev webpack

这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。

开发环境and生产环境:

  • 开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。

  • 生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。

安装好之后,可以看一下webpack版本(注意一下)
在这里说下,有的小伙伴安装好之后,“webpack”出现不是内部或外部命令,也不是可运行的程序或批处理文件。出现这样的情况,我们内心肯定会默默的出现一句脏话,
这里写图片描述
不用管它 我们可以继续输入:
npm install –save-dev webpack-cli

npm install –global webpack

npm install –global webpack-cli

这里写图片描述
输入好之后,我们可以查看一下webpack号 使用webpack -v 出现版本号则安装成功

7,我们可以在命令行 继续输入 webpack命令,会出现ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\Administrator\Desktop\webpack-test’ 这个错误

这里写图片描述

错误原因是webpack入口默认为src/index.js 进入webpack-test文件夹新建文件夹 src,进入src文件新建index.js
这里写图片描述
这里写图片描述
在index.js中写上内容:

alert(“webapck test”);

然后回到cmd窗口输入webpack

这里写图片描述

打包成功 但是还有一个警告 WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.是因为使用webpack没有指定mode为 development(开发模式)或者为production(生产模式)
这里写图片描述

8,这时我们可以在package.json文件中加入:

"scripts": {  
  "dev": "webpack --mode development",  
  "build": "webpack --mode production"  
},  

这里写图片描述

然后使用 npm run dev (相当于 webpack –mode development )或者

使用npm run build(相当于 webpack –mode production)

接下开看一下开发模式和生产模式的区别

我们首先看一下开发模式,回到cmd窗口 输入 npm run dev

这里写图片描述

进入webpack-demo文件夹,发现自动生成了一个dist文件夹,这是webpack默认输出文件位置

这里写图片描述
这里写图片描述
这时我们可以用编译器打开main.js文件
这里写图片描述

9,我们在webpack-demo目录下新建一个index.html,引入main.js看是否可用
这里写图片描述

<!DOCTYPE html>  
<html>  
<head>  
    <title>webpack-test</title>  
    <script type="text/javascript" src="./dist/main.js"></script>  
</head>  
<body>  

</body>  
</html>  

我使用的chrome浏览器 打开效果为下图,说明index.js打包成功

这里写图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值