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

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

1、安装NodeJS

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

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


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


点击运行


点击next


点上√,然后点击Next


选择安装目录


点击change选择安装目录


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


点击Next


点击Next


点击install


点击Finish,nodejs安装完成

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


输入cmd点击打开


输入node -v 出现nodejs版本号

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

2、安装webpack

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


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


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


使用notepad++打开package.json

  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


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

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

                npm install --global webpack

                npm install --global webpack-cli


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


使用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(生产模式)


也可以在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


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


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


使用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


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


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


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打包成功

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

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

阅读更多
文章标签: webpack
个人分类: 前端开发
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭