webpack配置proxy反向代理,解决跨域问题
1、问题：后端给的接口是：https：//stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地开发中调用该接口跨域。解决方案：在webpack中配置proxy。如下图所示 如上： target是你要代理的域名，必须要加上http。
2、上述配置便对post请求不生效了，也就是post请求跨域失败，而get请求成功。对比get和post请求的不同，发现get的请求头里面没有origin字段，而post请求里面有origin字段。
3、会产生跨域问题），然后看到请求地址会是以【 http：//localhost：8080/xxx 】开始的，但是调的接口是测试环境的接口，此时不用前端手动 setCookie 就可以本地启动&访问了。
4、vue项目部署必须用nginx。vue项目部署使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题，需要使用Nginx做反向代理，因此vue项目部署必须用nginx。vue是一个构建数据驱动的web界面的渐进式框架。
我们还能在哪些方面进行webpack性能优化
1、当然还有其他的可以优化的方法，比如使用ES module，能更好地利用webpack的tree shaking功能；Dll，为更改不频繁的代码生成单独的编译结果，但却是一个配置比较复杂的过程；还有对图片的压缩等等。
2、webpack 执行预处理文件时单线程的，我们可以使用 happypack 来多线程处理文件。
3、再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。
4、gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
5、可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。
6、webpack配置中的 output 属性的最低要求是将其设置为一个对象，包括以下两点：你编译出来 文件名 随你命名，但是我们通常使用 ： main.js 或者 bundle.js 或者 index.js 。
不依赖vue-cli脚手架创建vue项目
1、在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。
2、这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。
3、检测cnpm是否安装成功 vue-cli是vue脚手架工具，方便打包，部署，测试等。
4、知识记录2：如果你有Vue2，想升级Vue3的最新版本，可操作如下： 额外介绍下，你不一定使用vue脚手架创建vue项目，你还可以使用vite组件创建项目。
Vue3.0项目从Webpack改造成Vite
Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。
vite是vue3推荐的打包工具，相较于webpack，Vite 是基于 native ES module —— 现代浏览器基本已经全部支持了import/export 语法。
网上有很多vue使用cesium的配置教程，但大部分都是使用webpack进行配置，而且vue2版本居多，各种资料的内容又参差不齐，对于本项目来说造成了额外的时间成本，对新手来说非常不友好。
包，需要依赖一些 css ，图片，json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件，来帮我们完成这些配置。
安装webpack后还是提示webpack不是内部命令
Webpack与webpack-dev-server版本不兼容而导致编译出错。
web前端打包报错 webpack 打包成功但是会报错解决方法如下：具体看日志：This is most likely a problem with the SHOP.BM package。
webpack-dev-server有两种推荐的用法 命令行方式。这个取决于你的webpack.config.js文件，然后调用“node_modules/.bin/webpack-dev-server”npm script的方式。
step8： 使用 html-webpack-plugin 插件 使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。
webpack怎么创建配置文件
1、在package.json文件中添加命令，然后通过npm run build即可运行打包 但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。
2、step5： 配置入口文件和出口文件 每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。
3、方式一：webpack配置 webpack安装参考：[安装 | webpack 中文网]。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
