打包的意义 作用等前端概念集合 webpack基础配置等

基础网页是什么？

在学校最基础的三剑客 原生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 插件：