webpack知识树
在说这个问题之前,我们的先写一个node服务!
这里需要使用express框架,具体这里就不深究。
下面我们创建一个server.js给出代码
let express = require('express');
let app = new express();
// 当get方式访问/api/user 接口的时候,返回json数据
app.get('/api/user',(req,res)=>{
res.json({name:'我是某某某'}) // 服务返回数据
});
// 监听端口
app.listen(8888);
执行命令node sever.js
浏览器看下是不是可以拿到结果!
- 1.index.js代码如下
// Ajax Get请求
let getUserAction = ()=> {
let xhr = new XMLHttpRequest();
xhr.open('GET','/api/user',true)
xhr.onload = function () {
}
xhr.send()
}
window.getUserAction = getUserAction
- 2.index.html 按钮点击触发
<div>
<button class="btn-danger btn" onclick="getUserAction">提交</button>
</div>
执行npm run dev
,点击按钮提交按钮,默认还是在http://localhost:8081/
一、配置代理解决跨域问题
我们在webpack.dev.js
重新配置下代理
devServer: {
port:8081, //端口
progress:true, // 是否显示进度条
contentBase:'./dist', // 打包输出目录
compress:true,
proxy:{
'/api':{
target:'http://localhost:8888', // 请求服务地址
pathRewrite:{'/api':'/api'}// 请求有/api前缀的后面加上/api,这个就可以根据服务进行适配路径
}
}
},
执行npm run dev
,点击按钮提交按钮,看下效果
二、部署前端与后端服务在同一个端口
其实这个也简单,在现有工程,只要在服务端开启的时候,同时启动webpack。
这里需要引用一个中间件webpack-dev-middleware
在服务端启动webpack,其它后台环境也是同样的道理。
执行npm i webpack-dev-middleware -D
下载插件
- 1.我们在server.js修改如下
let express = require('express');
let app = new express();
let webpack = require('webpack')
// 中间件
let middleware = require('webpack-dev-middleware')
let config = require('./webpack.dev')
let compiler = webpack(config)
app.use(middleware(compiler,{
publicPath:config.output.publicPath
}))
// 当get方式访问/api/user 接口的时候,返回json数据
app.get('/api/user',(req,res)=>{
res.json({name:'我是某某某'}) // 服务返回数据
});
// 监听端口
app.listen(8888);
- 2.取消webpack
启动server.js服务,并在同端口加载webpack打包前端代码。
在改写中提示很多路径错误问题,这边在webpack.base.js
中做了路径的修改,后续源码会给出!
创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_cross
。
进入webpack
工程目录,执行 npm install -D