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

最新推荐文章于 2023-11-28 10:24:42 发布

一眼万川

最新推荐文章于 2023-11-28 10:24:42 发布

阅读量3.9k

点赞数 2

分类专栏： webpack 文章标签： npm webpack webpack 报错

本文链接：https://blog.csdn.net/liangxiaomanbu/article/details/81271387

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装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
评论
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 //全局安...
复制链接

扫一扫

专栏目录