webpack4搭建React+react-router+redux+antd项目及优化配置（超级详细）（一）

webpack4搭建React+react-router+redux+antd——webpack初始学习

#基础开发环境准备

一、node.js安装

node的下载地址：https://nodejs.org/en/download/

1. 一路点击next进行安装
2. 按住win+R,输入cmd命令，打开DOS窗口，输入node -v查看安装的node的版本。如果出现说明安装成功。
   在node中输入npm -v就可以查看安装的npm的版本。现在版本都是默认安装npm的。

二、npm镜像设置
由于npm仓库下载过于慢，建议设置国内淘宝镜像源，从淘宝下载可以提高下载速度。

1. 在DOS窗口输入下面命令
   npm config set registry https://registry.npm.taobao.org
2. 输入下面命令
   npm config get registry
   如果屏幕出现 https://registry.npm.taobao.org/说明安装成功

#webpack项目搭建

注：本次开发软件使用VSCode

1. 创建项目文件夹并进入项目根目录
   
2. 初始化项目的package.json文件　　　　　　　　
   npm init -y
   -y 不询问，执行默认
   
3. 安装webpack
   npm i webpack webpack-cli -D
   -D表示保存到开发依赖中
   
   第一个WARN：是因为fsevents是mac系统的，在win或者Linux下使用了，所以会有警告，忽略即可。fsevents的作用是能够检测文件目录的修改，可以记录恶意软件的非法操作，获取恶意软件的完整路径，删除和修改日期。
   第二个WARN：是说没有repository，缺少基本的仓库字段，一般团队合作开发，比如git，设置之后不会有警告了，忽略即可。
   另外两个WARN：是因为fsevents依赖是个可选依赖包，只有项目运行环境是mac OS时才会使用，在windows和Linux下会报这个warn，无关紧要。
4. 手动添加打包命令
   修改代码 package.json 中 scripts 部分：
   “scripts”: {
   “build”: “webpack”
   }
   此时我的package.json文件内容：

{
  "name": "webpack-one",
  "version": "1.0.0",
  "description": "webpack-one",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

此时，我们执行 npm run build， 会给出以下提示/错误：

error: 没有入口文件
warning: 建议设置 mode 选项
第一个问题：我们尝试新建 src/index.js，内容如下
console.log(hello world);
再次执行 npm run build，成功打包出了 dist/main.js,因此我们可以得知：
webpack4 默认配置了 entry（入口文件） src/index.js 和output（出口文件） dist/main.js

第二个问题：webpack4 之前，我们开发一个项目一般会定义个配置文件用于不同的开发环境：
用于开发环境的webpack.dev.conf.js，定义 webpack 启动的服务器等
用于生产环境的webpack.prod.conf.js，定义UglifyJSPlugin或其他配置等
而 webpack4 的 mode 给出了两种配置：development 和 production。
我们修改 package.json 中 scripts 部分：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

我们分别执行 npm run dev 和 npm run build，，，此时上面的mode模式警告没了。

npm run dev 打包的是未压缩的代码
npm run build 是压缩后的代码
生产模式下：启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简
开发模式下：相较于更小体积的代码，提供的是打包速度上的优化。
#总结:
webpack 4 的零配置主要应用于：
entry 默认设置为 ./src/index.js
output 默认设置为 ./dist/main.js
提供production 和 development 两种模式