黑马程序员Vue视频笔记（webpack打包发布）

目录

一、项目打包发布

1、配置 webpack的打包发布

2、各个文件有序拆分

3、把 JavaScript 文件统一生成到 js 目录中

 4、把图片文件统一生成到image目录中

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

二、Source Map

1、Source Map导致的问题

2、解决Source Map的问题

1、只定位行数不暴露源码

 2、定位行数且暴露源码

3、配置@代码源代码文件src

---

一、项目打包发布

1、配置 webpack的打包发布

运行npm run dev，就是开发模型，文件比较大，生成的打包文件会在内存中，不能通过目录访问

运行npm run build，就是发布模式，文件会压缩变小，生成的文件会在物理磁盘中，可以看到并且访问到

怎么发布和前端没有关系，把生成的dist文件打包发送给后端就行了。

2、各个文件有序拆分

此时dist文件很乱，我们希望它能按照图片，js，css进行有序拆分

3、把 JavaScript 文件统一生成到 js 目录中

4、把图片文件统一生成到image目录中

 用&符号连接写成这样也行:

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

此时每次打包之前，最好把dist文件删掉，再运行npm run build，会出现最新的的dist文件

每次打包之前要删掉很麻烦，希望在生成新文件的时候自动清理旧文件。

npm (npmjs.com)https://www.npmjs.com/可以通过npm官网访问这个插件，查看具体的使用

二、Source Map

1、Source Map导致的问题

前端项目在投入生产环境之前，都需要对JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错(
debug)是一件极其困难的事情。

因此导致源代码index.js和打包好的代码main.js代码行号对不上

2、解决Source Map的问题

注意：仅在开发模式下使用

 如果运行 npm run build 就是生产模式，如果项目报错，别人就可以点击报错的代码行，看到真正的源代码，很不安全。

 因此在发布项目的时候，出于安全性考虑，建议关闭Source Map，即把devtool配置注释掉。

1、只定位行数不暴露源码

此时，安全性考虑到了，但是对调试就很不友好，一个折中的解决方案：

2、定位行数且暴露源码

不太推荐！！！

关于Source Map的总结：

① 开发环境下：
建议把 devtool 的值设置为 eval-source-map
好处：可以精准定位到具体的错误行
② 生产环境下：
建议 关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
好处：防止源码泄露，提高网站的安全性

实际开发中不需要自己配置Webpack！

实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack的项目，所有 webpack的配置都是现成的。

3、配置@代码源代码文件src

在开发中，经常一个文件要引入别的文件，写法如下：

import msg from '../../msg'

如果层级多的话，会有许多../../../   不友好

建议用配置用@符号代表src源文件，上述代码就变成:

import msg from '@/msg.js'

配置方法如下：

 注意每次修改webpack.config.js的时候，都要重新运行项目，配置才能生效