基础配置:(文件)
1.node_modules ->src文件->index.js->webpack.config.js
方法:
1.webpack插件
总结:只能在本地使用proxy,打包上线就不会出现webpack的proxy(详细步骤)
运行结果:
前端服务:
代码:
index.js(前端写的)
//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
//xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
console.log(xhr.response);
}
xhr.send();//发送请求
server.js(后端写的)
//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();
//get post put delete请求方式
//后端接口是api的/api/user 不是api的接口 /user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
console.log('服务启动,端口3000');
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
</body>
</html>
先安装:cnpm i -S html-webpack-plugin
html-webpack-plugin的作用:
1.在内存中根据我们的index模板页面,生成一个内存里面的首页
2.当使用html-webpack-plugin之后,我们不再需要手动处理bundle.js的引用路径了,
因为这个插件,已经帮我们自动创建了一个合适的script,并且,引用了正确的路径
简要概述两个作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去
webpack.config.js
var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'/'
},
//1.webpack代理的方式解决跨域
devServer:{
proxy:{//代理过滤 以什么开头的
'/api':{//拦截/以api开头的后端地址
target:'http://localhost:3000',
//如果不是以api的开头,就把这个api清空,如果是就不用写以下的步骤 pathRewrite{'/api':''}
pathRewrite:{'/api':''}
}
}
},
plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
new htmlWebpackPlugin({//3.插件解决
filename:'index.html',//指定生成的页面的名称
template:'index.html'//模板
})
]
}
3.下一步 安装依赖npm i express (express是node的框架 用来启动服务);
4. 运行命令执行:node server.js 运行成功
5. 运行命令执行:npm run dev 运行成功
2.后端解决cors,前端可以随便访问,包括打包上线(详细步骤)
启动服务效果:如上图一样.就不贴这个图片了
代码:如下:
index.js
//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
// xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
console.log(xhr.response);
}
xhr.send();//发送请求
server.js
//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();
//2.后端配置cors打包就ok的
var allowCrossDomain = function (req,res,next){//允许访问的请求头
//请求源 ajax http://localhost:8080
res.header("Access-Control-Allow-Origin","*");
//请求头 x-token
res.header("Access-Control-Allow-Header","*");
//请求方法 get post put delete
res.header("Access-Control-Allow-Methods","*");
next();
}
app.use(allowCrossDomain);
//get post put delete请求方式
//后端接口是api的/api/user 不是/user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
console.log('服务启动,端口3000');
})
webpack.config.js
var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'/'
},
//解决打包后就不显示的问题(代理跨域)cors 这段代码就注销掉,cors不用这段代码
devServer:{
// proxy:{//代理过滤 以什么开头的
// '/api':{//拦截/以api开头的后端地址
// target:'http://localhost:3000',//如果不是以api的开头,就把这个api清空 如果是就不用写以下的步骤 pathRewrite:{'/api':''}
// pathRewrite:{'/api':''}
// }
// }
},
plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
new htmlWebpackPlugin({
filename:'index.html',//指定生成的页面的名称
template:'index.html'//模板
})
]
}
3.执行命令:node server.js
4.执行命令:npm run dev
5.运行成功
3.通过webpack-plugin插件的方式解决,通过webpack-dev-middleware中间介,让前端和后端的接口连接在一起,可以打包上线不影响的(详细步骤):
代码如下:
index.js
//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
// xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
console.log(xhr.response);
}
xhr.send();//发送请求
server.js
//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();
//3.通过插件解决前后端连接在一起
let webpack = require('webpack');
let middle = require('webpack-dev-middleware');
let compiler = webpack(require('./webpack.config'));
app.use(middle(compiler));
//get post put delete请求方式
//后端接口是api的/api/user 不是/user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
console.log('服务启动,端口3000');
})
webpack.config.js
var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'/'
},
//webpack-plugin插件解决:
devServer:{
// proxy:{//代理过滤 以什么开头的
// '/api':{//拦截/以api开头的后端地址
// target:'http://localhost:3000',//如果不是以api的开头,就把这个api清空 如果是就不用写以下的步骤 pathRewrite:{'/api':''}
// pathRewrite:{'/api':''}
// }
// }
},
plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
new htmlWebpackPlugin({
filename:'index.html',//指定生成的页面的名称
template:'index.html'//模板
})
]
}
插件版本:如下图
3.下载插件 cnpm i -S webpack-dev-middleware
4.运行命令:node server.js
5.运行命令:npm run dev
6.前端接口:http://localhost:3000调用,可以不用8080来调用
7.运行成功
效果图:3000接口
后端:3000/user(下图所呈现的方式:安装了谷歌的插件,才会有JSON的样式)
谷歌的扩展插件:如下图:
安装需要的包: 可以一起下载
npm install webpack webpack-cli webapck-dev-server html-webpack-plugin --save-dev
-S:线上
-g:全局
-D:本地
总结:在实现的过程中会遇到版本过高或过低报错的问题,不管是webpack或webpack-cli和webpack-dev-server和webpack-dev-middleware这些都会有版本冲突,所以慢慢尝试整改,加油!!!