webpack的学习3

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来测试

大功告成~~~~~~