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文件
另外一个配置，不会产生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来测试
大功告成~~~~~~
