模式 mode: 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
webpack 构建过程
- 从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。
- 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则。
- 对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
- 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
- 最后 Webpack 会把所有 Chunk 转换成文件输出。
- 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。
开发环境和生产环境
我们在日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，一套供线上使用。
- development : 用于开发的配置文件，用于定义
webpack dev server和其他东西 - production : 用于生产的配置文件，用于定义
UglifyJSPlugin，sourcemaps等
简单来说，开发时可能需要打印 debug 信息，包含 sourcemap 文件，而生产环境是用于线上的即代码都是压缩后，运行时不打印 debug 信息等。譬如 axios、antd 等我们的生产环境中需要使用到那么我们应该安装该依赖在生产环境中，而 webpack-dev-server 则是需要安装在开发环境中
平时我们 npm 中安装的文件中有 -S -D, -D 表示我们的依赖是安装在开发环境的，而-S 的是安装依赖在生产环境中。
本文就来带你搭建基本的前端开发环境，前端开发环境需要什么呢？
- 构建发布需要的 HTML、CSS、JS、图片等资源
- 使用 CSS 预处理器，这里使用 less
- 配置 babel 转码器 => 使用 es6+
- 处理和压缩图片
- 配置热加载，HMR
以上配置就可以满足前端开发中需要的基本配置。下面是本文打包后的效果图：
搭建基本的开发环境
安装
mkdir webpack-dev && cd webpack-dev npm init -y npm i webpack webpack-cli -D
添加 scripts
生成了 package.json 文件，在文件中添加
"scripts": {
"build": "webpack --mode production"
}
-- mode 模式 (必选，不然会有 WARNING )，是 webpack4 新增的参数选项，默认是