您的位置: 首页  >  文章  >  The 'mode' option has not been set 解决方法

The 'mode' option has not been set 解决方法

分类: 文章 • 2022-10-16 21:53:16

30天JavaScript，每天一个小demo，轻轻松松掌握基础用法，详见点击打开链接，欢迎点赞~~~谢谢，共同进步学习

windows 使用npm安装webpack 4.0以及配置问题的解决办法

1、安装NodeJS

首先需要安装nodejs点击如下链接

https://nodejs.org/en/download/点击打开链接

The 'mode' option has not been set 解决方法

选择Windows Installer点击下载，下载完成之后点击安装包进行安装，

The 'mode' option has not been set 解决方法

点击运行

The 'mode' option has not been set 解决方法

点击next

The 'mode' option has not been set 解决方法

点上√，然后点击Next

The 'mode' option has not been set 解决方法

选择安装目录

The 'mode' option has not been set 解决方法

点击change选择安装目录

The 'mode' option has not been set 解决方法

将Fold name 改为d:\Program Files\nodejs\ 点击OK

The 'mode' option has not been set 解决方法

点击Next

The 'mode' option has not been set 解决方法

点击Next

The 'mode' option has not been set 解决方法

点击install

The 'mode' option has not been set 解决方法

点击Finish，nodejs安装完成

使用win+r打开cmd窗口或者点击开始搜索cmd打开窗口

The 'mode' option has not been set 解决方法

输入cmd点击打开

The 'mode' option has not been set 解决方法

输入node -v 出现nodejs版本号

输入npm -v 出现npm版本号则安装npm安装成功，

2、安装webpack

桌面新建一个webpack-test文件夹，点击进入文件webpack-test夹 按下shift+鼠标右键  点击在此处打开命令窗口

The 'mode' option has not been set 解决方法

输入npm init 一直点击回车键 当出现Is this ok？时 输入yes，然后点击回车键

The 'mode' option has not been set 解决方法

进入webpack-test文件夹，出现package.json文件

The 'mode' option has not been set 解决方法

使用notepad++打开package.json

[css] view plain copy
  1. {  
  2.   ”name”: “webpack-test”,  
  3.   ”version”: “1.0.0”,  
  4.   ”description”: “”,  
  5.   ”main”: “index.js”,  
  6.   ”scripts”: {  
  7.     ”test”: “echo \”Error: no test specified\” && exit 1”  
  8.   },  
  9.   ”author”: “”,  
  10.   ”license”: “ISC”  
  11. }  

回到cmd窗口，输入 npm install –save-dev webpack
The 'mode' option has not been set 解决方法

这时候使用 webpack -v 会出现’webpack’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

The 'mode' option has not been set 解决方法

继续输入  npm install –save-dev webpack-cli

                npm install –global webpack

                npm install –global webpack-cli

The 'mode' option has not been set 解决方法

使用webpack -v 出现版本号则安装成功

The 'mode' option has not been set 解决方法

使用webpack 命令 出现错误ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\Administrator\Desktop\webpack-test’

The 'mode' option has not been set 解决方法

错误原因是webpack入口默认为src/index.js  进入webpack-test文件夹新建文件夹 src，进入src文件新建index.js

The 'mode' option has not been set 解决方法

The 'mode' option has not been set 解决方法

在index.js中写入内容

    alert(“webapck test”);

然后回到cmd窗口输入webpack

The 'mode' option has not been set 解决方法

打包成功 但是还有一个警告 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（生产模式）

The 'mode' option has not been set 解决方法

也可以在package.json文件中加入

[javascript] view plain copy
  1. ”scripts”: {  
  2.   ”dev”: “webpack –mode development”,  
  3.   ”build”: “webpack –mode production”  
  4. },  

最终package.json文件内容为

[javascript] view plain copy
  1. {  
  2.   ”name”: “webpack-test”,  
  3.   ”version”: “1.0.0”,  
  4.   ”description”: “”,  
  5.   ”main”: “index.js”,  
  6.   ”scripts”: {  
  7.     ”test”: “echo \”Error: no test specified\” && exit 1”  
  8.   },  
  9.   ”scripts”: {  
  10.       ”dev”: “webpack –mode development”,  
  11.       ”build”: “webpack –mode production”  
  12.   },  
  13.     
  14.   ”author”: “”,  
  15.   ”license”: “ISC”,  
  16.   ”devDependencies”: {  
  17.     ”webpack”: “^4.0.1”,  
  18.     ”webpack-cli”: “^2.0.10”  
  19.   }  
  20. }  

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

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

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

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

The 'mode' option has not been set 解决方法

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

The 'mode' option has not been set 解决方法

进入dist文件夹 发现出现一个main.js 这是webpack默认输出的js文件

The 'mode' option has not been set 解决方法

使用notepad++ 打开main.js 内容如下 js文件为正常开发时的格式

[javascript] view plain copy
  1. /******/ (function(modules) { // webpackBootstrap  
  2. /******/    // The module cache  
  3. /******/    var installedModules = {};  
  4. /******/  
  5. /******/    // The require function  
  6. /******/    function __webpack_require__(moduleId) {  
  7. /******/  
  8. /******/        // Check if module is in cache  
  9. /******/        if(installedModules[moduleId]) {  
  10. /******/            return installedModules[moduleId].exports;  
  11. /******/        }  
  12. /******/        // Create a new module (and put it into the cache)  
  13. /******/        var module = installedModules[moduleId] = {  
  14. /******/            i: moduleId,  
  15. /******/            l: false,  
  16. /******/            exports: {}  
  17. /******/        };  
  18. /******/  
  19. /******/        // Execute the module function  
  20. /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);  
  21. /******/  
  22. /******/        // Flag the module as loaded  
  23. /******/        module.l = true;  
  24. /******/  
  25. /******/        // Return the exports of the module  
  26. /******/        return module.exports;  
  27. /******/    } ……  

然后看一下生产模式，回到cmd窗口 输入 npm run build

The 'mode' option has not been set 解决方法

进入webpack-test/dist，然后再打开main.js，发现内容格式非常紧凑，适合生产环境下使用

The 'mode' option has not been set 解决方法

我们在webpack-test目录下新建一个index.html，引入main.js看是否可用

The 'mode' option has not been set 解决方法

index.html内容为 保存之后点击index.html使用浏览器打开

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>webpack-test</title>  
  5.     <script type=“text/javascript” src=“./dist/main.js”></script>  
  6. </head>  
  7. <body>  
  8.       
  9. </body>  
  10. </html>  

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

The 'mode' option has not been set 解决方法

至此webpack安装完成，至于后面应用配置还要更加繁琐，根据个人需求可以在官方文档参考如何配置

https://webpack.js.org/guides/点击打开链接

相关推荐