webpack的使用
webpack 4.x的使用
前言：
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
- 模块化，让我们可以把复杂的程序细化为小的文件;
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
- Scss，less等CSS预处理器
- ...
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
来自于： 入门 Webpack，看这篇就够了
0. 新建项目，并在项目文件夹下进行如下操作
1. 运行npm init -y 快速初始化项目，生成包管理配置文件（package.json）将来所有的包都在此处进行管理
2. 新建目录 ---> 在项目的根目录创建 src 源代码目录 和 dist 产品目录
1. 新建src文件夹：存放项目的所有源代码
2. 新建dist 或者（build）文件夹： 用于存放项目生成的代码， 例如jQuery，一般就是在./dist 目录下的, dist是webpack默认的打包后存放文件的地方
3. 新建文件 ---> 在src目录下创建index.html
index.html文件是最终用于显示的页面（打包后生成的js文件，需要引入到index.html中）
另外： ---> vs code 小技巧 （1.先输入一个 ! ； 2. 再按tab键。即可生成基础的HTML代码 ）
4. 安装webpack相关， 运行 npm i webpack webpack-cli -D
。也可以通过安装cnpm 来操作上面的命令 （安装cnpm： npm i cnpm -g）
。 webpack-cli 即webpack的脚手架， 是4.x以后的版本才有的， 提供webpack的命令
5. 此时运行 ‘webpack’ 命令
会报如下提示 （注意： 如果webpack命令不生效， 需要全局安装 即： npm i webpack webpack-cli -g）
提示缺少mode 选项， 需要去启用一些默认的配置
6. 新建webpack配置文件 ---> webpack.config.js
此处的mode属性值有两种选择：
development： 表示开发模式，打包出的main.js文件未经过压缩；
production： 表示产品模式， 打包出的main.js文件是经过压缩的
7. 再次运行 ‘webpack’ 命令
报如下提示： ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\react\webpack-base
8. 在src目录下新建 index.js文件，再次运行 'webpack' 命令
即可运行成功 ---> 最终在dist目录下自动生成 main.js打包文件
9. 最后， 手动将自动生成的main.js引入到我们的index.html中
即可看见页面效果
总结： webpack 4.x中 提供了约定大于配置的概念（不需要在webpack.config.js中手动添加配置代码）， 目的是为了尽量减少配置文件的体积
默认约定了： 打包的入口文件是 src -> index.js
打包的输出文件是 dist -> main.js
当然，也可以自己手动添加配置代码进行覆盖。。。
