Vue2 零基础入门 Vue2 零基础入门第一天 1.5 打包发布 && 1.6 Source Map

Vue2 零基础入门

Vue2 零基础入门第一天

老师：黑马程序员

1 前端工程化与webpack

1.5 打包发布

1.5.1 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

1.5.2 配置webpack的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

1.5.3 把JavaScript文件统一生成到js目录

在 webpack.config.js 配置文件的 output 节点中

1.5.4 把图片统一生成到image目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径

1.5.5 自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件

1.6 Source Map

1.6.1 生产环境遇到的问题

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。

此时就不可避免的产生了另一个问题：

对压缩混淆之后的代码除错（debug）是一件极其困难的事情

变量被替换成没有任何语义的名称
空行和注释被剔除

1.6.2 什么是Source Map

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

1.6.3 webpack开发环境下的Source Map

在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码

【默认Source Map问题】

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

【解决】

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致

1.6.4 webpack生产环境下的Source Map

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。

【只定位行数不暴露源码】

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为nosources-source-map。

【定位行数且暴露源码】

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map。

1.6.5 Source Map的最佳实践

① 开发环境下：

• 建议把 devtool 的值设置为 eval-source-map
• 好处：可以精准定位到具体的错误行

② 生产环境下：

• 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
• 好处：防止源码泄露，提高网站的安全性

实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目
开箱即用，所有 webpack 配置项都是现成的
只需要知道 webpack 中的基本概念即可