前端工具webpack安装/打包过程中遇到的问题以及详细的解决方法

webpack打包过程中遇到的各种问题以及详细的解决方法

很多人基本上都是在网上找的视频自学的，但是网上找到的学习视频很少是发布的，大都是一两年前的，视频中所用的webpack的版本也是几年前的，前端的知识更新的很快，不同的版本，执行的命令也不一样，成功用webpack打包自定义的js文件，我花了快三天的时间，整个人都头大。

WebPack4.0+以上版本 打包警告提示The ‘mode’ option has not been set解决方法?

1. 首先，从最开始的安装webpack开始（我建的文件夹的名字叫webpack-study），前提是已经装好了node，可以在终端上通过 node-v 来查看node的安装以及版本；
   .
   npm install webpack -g (是全局安装，下次再创建项目不用再进行安装，我装的是全局的)
   npm install webpack --save-dev (是局部安装，只在本项目里面起作用)

2. 装完webpack后，在终端命令行上继续输入npm init ,然后一直敲回车键;

3. 之后我们在webpack-study文件夹中会看到生成一个package.json文件文件，如图:
   

4. 接着需要安装 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已经安装成功了）

5. 输入执行命令 webpack ./src/main.js ./dist/bundle.js (将src目录下的自定义main.js打包成dist文件下的bundle.js)
   
6. 报**The ‘mode’ option has not been set…**错误是因为webpack4.0+的版本需要指定mode( development开发模式和production生成模式)，其中开发模式是未压缩的html正常格式，生成模式是压缩后的格式，代码比较紧凑：
7. 
8. 更改输入命令 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

1. 这个是在根目录下添加了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的文件，这个就是打包生成的文件


现在看来自己真的是个小菜鸡，需要好好学习，不断的努力，也是记个笔记，希望有用！