webpack多页面配置，谁有比较全的理解
发布网友
发布时间：2022-04-22 02:31
共1个回答
热心网友
时间：2023-06-27 23:48
目录
官方文档
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脚手架进行创建
