之前对于跨域只是知道node环境用axios库是可以解决的,今天查资料发现webpack也解决了这一问题
一般会遇到跨域是在开发环境,因为一般放到服务器的域和后台是一样的,不存在跨域问题
所以只需解决开发环境的跨域问题即可,webpack的 webpack-dev-server库 解决了这一问题,因为webpack运行在node环境所以不存在跨域的问题
同时也解决了开发阶段编写代码,打包,打开页面查看效果,继续编写代码、调试过程过于繁琐
这个命令是专门为开发阶段服务的，真正部署时还是要使用webpack命令
运行这个命令 会搭建临时一个服务器环境 不生成页面,只要修改就可查看实时页面
如果需要进行其他配置写在webpack.config.js
devServer:{
port:8000, //监听端口
open:true,//开启服务器后自动打开浏览器访问
proxy:{//常用于跨域访问
"/api":{//请求地址符合正则/api,就进行代理 这里的/api 写正则表达式
target:"要请求的域名",
changeOrigin:true,//更改请求头中的host和origin
}
}
},
区分环境
开发和生产环境需要的配置不相同 这时就需要区分开发和生产环境
webpack.config.js文件配置,如果写的是对象无法区分环境,这时可以用webpack配置函数
webpack开始构建发现配置是一个函数，会调用该函数将返回的对象作为配置内容
调用webpack函数时，webpack会向函数传一个参数env，参数值来自webpack命令中给env指定的值
在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果
const path = require("path");
package.json scripts中配置环境变量,npm run 命令
"scripts": {
"dev":"webpack",
"prod":"webpack --env.prod"
}
//也可以创建两个文件导出两个对象 在webpack.config.js中导入
//公共样式再写个文件 最后导出
module.exports = env => {
if(env && env.prod){
return {
//生产环境配置对象
}
//在webpack.config.js中根据环境混合
//return {
//...公共样式
//...环境配置
//}
}else{
return {
//开发环境配置对象
}
}
}
其他配置
module.exports = {
//入口和loaders的相对路径会以context的配置作为基准路径
context: path.resolve(__dirname, "src"),
output:{
//将打包后的结果赋值给abc
library: "abc",
//abc的var根据libraryTarget决定,其他格式有window,this,global,commonjs
libraryTarget: "var"
},
//设置打包结果最终要运行的环境web,node
target:"web", //默认web
resolve:{
modules: ["node_modules"],//默认值 模块查找位置
extensions: [".js", ".json"],//默认值 解析模块遇到无后缀导入语句依次测试后缀名
alias: {
//require("@/abc.js"),webpack将其看作require(src的绝对路径+"/abc.js")
"@": path.resolve(__dirname, 'src'),
}
},
externals: {//从最终的打包文件中排除掉配置的源码
//适用一些第三方库来自外部CDN情况，这样即可以在页面中使用CDN，又让bundle的体积变得更小，还不影响源码的编写
jquery: "$",
}
}
返回列表
评论