很多人基本上都是在网上找的视频自学的,但是网上找到的学习视频很少是发布的,大都是一两年前的,视频中所用的webpack的版本也是几年前的,前端的知识更新的很快,不同的版本,执行的命令也不一样,成功用webpack打包自定义的js文件,我花了快三天的时间,整个人都头大。
WebPack4.0+以上版本 打包警告提示The ‘mode’ option has not been set解决方法?
-
首先,从最开始的安装webpack开始(我建的文件夹的名字叫webpack-study),前提是已经装好了node,可以在终端上通过 node-v 来查看node的安装以及版本;
.
npm install webpack -g (是全局安装,下次再创建项目不用再进行安装,我装的是全局的)
npm install webpack --save-dev (是局部安装,只在本项目里面起作用) -
装完webpack后,在终端命令行上继续输入npm init ,然后一直敲回车键;
-
之后我们在webpack-study文件夹中会看到生成一个package.json文件文件,如图:
-
接着需要安装 webpack-dev-server ,如图:
(npm install webpack-dev-server --save-dev是局部安装)
安装完成后,此时我们的package.json文件的内容为:
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.39.1",
"webpack-dev-server": "^3.3.6"
}
}
webpack-dev-server 可以在开发环境中提供很多的服务,比如启动一个服务器,热更新、接口代理等
装好后可以用 webpack-v 来查看一下自己的webpack是否安装成功,若出现版本号则表示安装成功,下图是我的webpack--------(至此webpack已经安装成功了)
- 输入执行命令 webpack ./src/main.js ./dist/bundle.js (将src目录下的自定义main.js打包成dist文件下的bundle.js)
- 报**The ‘mode’ option has not been set…**错误是因为webpack4.0+的版本需要指定mode( development开发模式和production生成模式),其中开发模式是未压缩的html正常格式,生成模式是压缩后的格式,代码比较紧凑:
- 更改输入命令 webpack ./src/main.js -o ./dist/bundle.js --mode development(或者是 webpack ./src/main.js -o ./dist/bundle.js --mode production);黄色警告就会消失。
报错:ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in 'E:\web练习\webpack-stud
- 这个是在根目录下添加了webpack.config.js文件,配置了webpack的入口文件和出口文 (主要是更改一下上面自定义的main.js,我们就要重新手动打包一次,输入的命令也比较长,跟上面7.命令一样,所以给webpack配置一下文件)
2. 简单的一个配置如下:
3.输入命令**“webpack”后报错ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in 'E:\web练习\webpack-stud, 报错的原因是因为webpack的默认入口文件是src目录下的index.js文件,但是我自建的webpack-study文件下,所有都装好也没有index.js文件,此时需要手动创建一个,创建好后,我们再次输入webpack**命令发现有警告
这里的警告还跟上面的一样需要指定webpack的模式
到这时我遇到了个可头疼的问题,就是发现webpack只会把它自己的默认入口index.js文件给打包成main.js文件放到dist文件夹下面,而我自定义的src/main.js不能打包。
输入命令一直报ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in 'E:\web练习\webpack-study错误,此时心里一万个妈卖批跑过。。。。。。。。。
最后。。。。。。也是最让我忽略的一个错误就是,我把webpack.config.js文件放错了位置,应该放到根目录下,也就是我的webpack-study目录下,被我建到了src的目录下,下面是我放正确目录的位置
然后再去输入命令webpack --mode development,就会发现dist文件下生成了一个bundle.js的文件,这个就是打包生成的文件
现在看来自己真的是个小菜鸡,需要好好学习,不断的努力,也是记个笔记,希望有用!