webpack可以配置单页应用,现在我们来配置一下多页应用
----假设我们想在src下面新建2个js,一个是home.js和一个是other.js,分别代表2个不同的页面和不同的js,打包后生成2个不同的js,那么如何配置了?
entry:{
home:'./src/index.js',//入口
other:'./src/other.js'
},
output:{ //出口
filename:'[name].js', //输出文件名称,添加hash,并且只要8位
//__dirname 表示当前目录下 输出文件路径
path:path.resolve(__dirname,'dist')
//输出公共基准目录添加前缀
//publicPath:'http://www.baidu.com'
},
ps:入口就是这2个,名字可以随便取,出口都是【name】变量就好了,然后模板html是下面的
new HtmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
template:'./src/index.html', //指定模板页面
//将来会根据此页面生成内存中的页面
filename:'home.html', //指定生成页面的名称,index.html浏览器才会默认直接打开
chunks:['home']
}),
new HtmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
template:'./src/index.html', //指定模板页面
//将来会根据此页面生成内存中的页面
filename:'other.html', //指定生成页面的名称,index.html浏览器才会默认直接打开
chunks:['other']
}),
打包后的效果图
当我们打包后,发现代码有错误,控制台报错了,想知道哪里出错了,一般不是很容易找出来,因为全部都是压缩的代码,而且点击也不能定位到具体位置,那么具体改怎么配置,才可以方便我们调试代码了?
这里我们就要开启源码调试了,启动source-map就可以方便我们跟踪定位错误代码,配置如下
//源码映射 会单独生成一个sourecmap文件,出错了会标示
devtool:'source-map',//增加映射文件,可以帮我们调试代码
发现多了几个map文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONF4MKpm-1631844019473)(https://upload-images.jianshu.io/upload_images/19833353-0efa634f3ae37dcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
另外一个配置,不会产生map文件,但是也可以定位到错误代码处
devtool:'eval-source-map' //不会产生单独的文件,但是可以显示行和列
还有另外2中不是很常用,记录一下
//devtool:'cheap-module-source-map' ,//不会产生列,但是是一个单独的映射文件,产生后你可以保存起来
//devtool:'cheap-module-eval-source-map' ,//不会产生单独的文件,集成在打包文件中哦
我们希望改完代码,实时可以看到效果,webpack帮我们自动打包就好了,那么如何配置了?
很简单,添加一个命令就好了
watch:true
当然也可以添加一些配置哦
watchOptions:{
poll:1000, //每秒问我1000次
aggregateTimeout:500, //防抖,500msz之后才开始打包
ignored:/node_modules/ //忽略这个文件夹
},
如果我想,每次打包都自动删除dist目录,然后生成dist目录打包出最新的文件,如何配置了?
1:可以用clean-webpack-plugin
cnpm install clean-webpack-plugin --save
2:引入
//清空dist目录,重新打包生成dist目录和文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
3:配置
new CleanWebpackPlugin()
4:测试使用
如果我们有一些doc文档,或者txt文件,也想一起打包到dist目录下,怎么办了?
答案 用copy-webpack-plugin
1:安装copy-webpack-plugin
cnpm i copy-webpack-plugin --save
2:引入
//拷贝内容(比如doc/txt/excel)打包到dist目录下
const CopyPlugin = require('copy-webpack-plugin');
3:配置
new CopyPlugin([
{ from: './doc', to: './dist' }
])
可以放入多个,改成多个对象就可以了
4:打包测试
最后用webpack内置的功能,给每个打包的js插入一个内置的版本说明,
new webpack.BannerPlugin('made in shenzhen of dongdong')
那么如果我们再在webpack中配置访问一个api,比如这样
http://localhost:3000/api/user
那该怎么实现了?
答案:放心都帮我们想好了
1:先模拟一个api接口,webpack已经自带了express,那么我们就用express启动一个后台服务,开一个模拟json
新建一个server.js
let express = require('express');
let app = new express();
app.get('/api/user',(req,res)=>{
res.json({
name:"好好学习Webpack"
})
})
app.listen('3000',()=>console.log('server init'))
然后启动
node server.js
2:安装一下axios,发送ajax请求
cnpm install axios --save
3:webpack配置开启跨域代理
devServer:{
proxy:{
'/api':"http://localhost:3000"
}
}
ps:所有以api开头的都代理到这个域名来
4:写代码测试
index.html
<div id="app">
<p>我来测试less</p>
<input type="button" id="btn" value="发送请求" />
<div id="out"></div>
</div>
5:index.js
//模拟跨域
const axios = require('axios');
document.getElementById("btn").onclick=()=>{
let api ="/api/user";
axios.get(api).then(res=>{
console.log(res);
document.getElementById("out").innerHTML=res.data.name;
}).catch(err=>{
console.log(err)
})
}
6:打包启动测试
cnpm run dev
ok,成功啦
实际工作中,后端接口不可能都带有/api/xxxx,那么怎么办了?
可以修改配置,去掉api就好了,用pathRewrite
proxy:{
'/api':"http://localhost:3000/",
pathRewrite:{
'/api':""
}
}
上面讲的是第一种方式,下面来讲用webpack自带的接口访问,就不用配置跨域代理啦
devServer:{
before(app){
app.get('/user',(req,res)=>{
res.json({
name:"好好学习React---dong"
})
})
}
}
修改访问后,打包测试
那么讲解最后一种,既不想用代理,也不想用webpack自己的模拟mock服务,想在服务器上面用webpack,然后用服务器自己的端口,不就不会跨域了,怎么实现了?
答案是有的:靠webpack-dev-middleware
1:安装webpack-dev-middleware
cnpm install webpack-dev-middleware --save
2:修改server.js
//1
let webpack = require('webpack');
let middle = require('webpack-dev-middleware')
//2
let config = require('./webpack.config.js');
//3
let complier = webpack(config);
//4
app.use(middle(complier));
3:注释掉webpack.config.js中的devServer所有配置
4:重启配置和node服务
5:打包测试node server.js
6:这里就不能用以前的8080访问啦,切记
http://localhost:3000/和http://localhost:3000/user/dong来测试
大功告成~~~~~~