基础网页是什么？
在学校最基础的三剑客 原生JS CSS H5就可以开发静态网页了
对于浏览器而言也能识别这些基础的文件和语法，真正的所见即所得，非常直接。
为什么要使用框架库？
对于常用的前端框架而言，无论是Vue React angular
他们相比原生JS有以下优点：
- 他们既能脚手架工具几行命令就可以快速搭建项目。
- 又能减少大量的重复代码，结构更加清晰，可读性强。
- 还有丰富的UI库和插件库。
而Jquery作为最常见的JS扩展库，和框架并不相同。相当于用砖头水泥沙子盖房子的话，那么用框架就相当于一个房间一个房间的搭建房子。
为什么要打包？
在使用了以上框架库，甚至是Scss、Less等CSS 预处理器，如果不进行打包，浏览器是无法识别的。要通过webpack等打包工具：
一方面将框架和预处理器等文件编译成浏览器可以识别的普通js css，
另一方面把多个文件合并成一个文件，还涉及到压缩。
而使用webpack对项目进行打包发布的主要原因有两点：
①开发环境之下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
②开发环境之下，打包生成的文件不会进行代码压缩和心梗优化，
为了让项目能够在生产环境中高性能的运营，因此需要对项目进行打包发布。
如何配置打包？
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下：
--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
把 JavaScript 文件统一生成到 js 目录中
在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
把图片文件统一生成到 image 目录中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
自动清理 dist 目录下的旧文件：
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：