vue.config.js中的webpack配置，优化及多页面应用开发

Posted 2023-03-04

参考技术A

目录

官方文档

vue-cli3以下版本中，关于webpack的一些配置都在config目录文件中，可是vue-cli3以上版本中，没有了config目录，那该怎么配置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js，跟package.json同级)

在配置中绝大多数都是（可选项）

常规操作还是用到了commjs语法

部署应用包的基本Url，默认/, 可以设置为相对路径./,这样打出来的包，可以部署到任意路径上

输出文件目录（打包后生成的目录，默认dist）

打包后生成的静态资源目录，默认“ ” ，也就是我们打包后的css，js等存放的位置

是否在保存的时候检查

生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值是true

可通过 devServer.proxy解决前后端跨域问题（反向代理）

扩展： hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

扩展：
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；

Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 javascript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。

webpack配置

扩展:

在这里configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack配置的方式不同：

这里配置了全局sass 需要安装的依赖 sass-loader less-loader

由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同

vue-cli3中的webpack与vue多页面应用开发
相关参数:

封装

很好的pwa插件相关配置
pwa介绍及使用

当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;

上面已经提到过去掉打印的操作（console、debug）这里详细讲解一下

新版uglifyjs-webpack-plugin需写成以下方式

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。

和我们正常创建项目相同，这里通过vue-cli3脚手架进行创建