目录
一、项目打包发布
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的时候,都要重新运行项目,配置才能生效