webpack5 基础配置 9 devServe的基本配置

output配置的publicPath

output的path中是指定打包后的文件放在哪个位置，而publicPath是决定打包后的html怎么引入Js文件。


src的路劲是 publicPath+path


publicPath默认是个空字符串。
当是一个空字符串时，

这里的bundle.js，因为我们是在devserver启动的，所以默认会添加上域名。一般的查找路径就是

域名+publicPath+bundle.js，因为publicPath默认是空字符串,所以就是http://localhost:8080+bundle.js，一般我们的浏览器会自动在中间加上斜杠，就变成了8080/bundle.js所以就可以找到资源了。

Vue脚手架一般是 ‘/’，为的是预防有些浏览器不会自动帮助我们加/。
我们现在是在服务器上启动的，但是当我们打包后直接打开index.html文件，/bundle.js文件还能被找到吗，恐怕是不能
可以看到已经报错了。要想正确运行只能找到文件所在位置


但部署的时候还是加上/就好。

DevServe的publicPath

webpack.config.js文件的devServe是为开发过程中，启动一个本地服务，也就是所在生产模式是用不到的。

devServer中的publicPath是针对本地服务器的文件夹，如果设为/abc，也就是说默认会通过http://locashost8080/abc/下的目录去找到文件夹，这时候如果我们的output的publicPath还是默认值，即只有http://localhost8080/bundle.js文件才能访问到的话，那么是不能访问的，因为我们得加上/abc，管网页提示让我们devServe的PublicPath与output的publicPath一样。

注意devserve的publicPath的默认值是’/’,这也就解释了为什么上面所说的浏览器会自动帮我们在域名与文件名中间加上/。

默认的时候

变成abc的时候，可以很明显看到不一样，



解决办法


可以看到正常打印了。

devServe的contentBase

他的作用是什么呢？这个对我们直接打包的资源没什么影响，但是如果我们打包后的资源有依赖于其他资源，如下图，public的index.html模板，依赖abc下的Index.js文件。

运行，

可以看到正常运行，为什么呢。因为下图提示，content是运行在当前目录下的，所以他能找到该文件的资源，那如果我改一下呢?

这下子contentBase的作用就知道了吧，就是来配置这些其他的资源的路劲。
解决办法


在abc里面在嵌套abc，因为content的目录是从abc开始的，他会找到里面的abc的Index.js。
contentBase一般是一个绝对路劲。

另外，这些依赖的外部资源，默认是不会帮我们热替换的，所以我们可以加上一个属性，watchContentBase: true
这样就会重新刷新浏览器。但不会重新编译，会重新刷新。

devServe的hotOnly,host配置

hotOnly有什么用呢？我们开启hot为true的时候会帮我们开启热替换，但是如果我们在编写代码的时候写错了，就会直接报错，然后页面也会报错，当我们修改完毕后，页面会重新刷新，但是之前的页面的一些状态也会不见，因为是全部重新刷新。若我们想让修改完代码后，只刷新报错的地方，其他的地方不要刷新，这样就能保持之前的转台，那么就开启hotOnly:true
.
错误信息依然存在，所以生效了。没有重新刷新。

host是设置主机地址的，默认的是localhost

devServe的port open compress

port是设置端口的默认是8080
open为true是编译成功时自动打开服务器，如react
compress是否为静态文件开启gzip压缩，默认是false，经过gzip压缩后的文件会变很小。（性能优化）


可以看到原来是1.8m，压缩到421kb了。

devServe的Proxy代理

设置代理解决跨域问题。如果发送的请求是localhost:8080,但是本地的服务器是localhost:8000,那么就会产生跨域问题，此时就可以通过将请求发送到代理服务器，让代理服务器帮助我们请求。服务器之间没有跨域限制。
其实还是相对容易的，/api我们要映射到http://localhost:8080去，所以我们的网络请求一般写axios.get(’/api/xxxx)，但是只是这样的话，api会帮我们映射到8080，就是在前面加上http://localhost:8080/api/xxx，这样就多了个api，所以我们要想办法去掉api，直接配置pathRewrite属性，即路径重写。将以^api开头的全部替换成’’，这样发送请求时，就会在前面帮我们加上映射的路劲8080，并且将api替换成空字符串。就可以实现跨域了。
小结： devServe的Proxy里面设置映射，然后在发送请求的时候就不用写全部陆劲，写上映射的如上图的api,编译的时候自动在前面帮助我们加上映射的路劲地址，而且api也要去掉，所以使用pathRewrite属性，将api转成空字符串。
这个代理不支持https，需要额外的配置，secure: true

还有一个changeOrigin.说到这个先说一下，其实我们的数据得通过8080才能拿到的，但是现在我们做了一层代理，也就是说我们是本地服务器8000发起的请求，然后通过代理去请求服务器，现在很多服务器都会做一层验证，比如只允许8080的端口访问，这时候我们的8000如果通过代理去请求也是拿不到数据的，就可以直接设置changeOrigin：true，顾名思义，改变Origin，
changeOrigin不是wbepack内部帮我们实现的，官网上说的是它使用的是一个http-proxy-middleware的软件包。

通过源码可以明显看出，判断是否通过配置changeOrigin从而改变Header请求头的host。

devServer的historyApiFallback配置

这个主要是解决spa页面在路由跳转后进行页面刷新的时，返回404的问题。
主要是当我们使用路由跳转时，如果从8080跳到8080/A，后，这是前端路由，他会做一个监听，监听路由的变化，然后帮我们执行js代码，但如果我们刷新后，浏览器会认为需要重新像服务器发送请求，8080/A,但是此时我们的8080下面哪有A这个文件，所以就会报404的错。


可以看到已经生效了。也可以更具体的配置一下

devServe的配置就基本结束了

resolve模块的配置

resolve用于模块如何被解析。

webpack是用enhanced-resolve库（自己开发）来解决。
webpack通过这个库能解决三种路劲，
1 绝对路劲 以获得模块的绝对路劲，不需要过多操作。
2 相对路劲 以Import/require的文件所在目录为上下文目录，拼接此上下文路劲，生成模块绝对路劲。
3 模块路劲 在resolve.modules中指定的所有目录检索模块。默认值是【‘node_modules’】，所以webpack就会默认从node-mocules找文件，像我们import from xxx, require xxx 都是模块路劲。
可以通过配置来替代初始模块的路劲。

确定文件还是文件夹

如果是一个文件，如果有扩展名，则直接打包文件。如果没有。使用resolve.extensions选项作为文件扩展名解析。
如果是一个文件夹，会根据resolve.mainFiles(默认值是Index)这个配置去制定的文件夹中找。然后根据resolve.extensions去匹配扩展名。

resolve的extensions与alias配置

extensions默认是【.wasm, .mjs, .js, .json】
如果我们想省略一些扩展名，如jsx vue tsx等。就得在里面配置。


配置成功，搜索顺序是从左到右。

alias是配置别名的经常设置

可以看到配置成功了。

小结 resolve的extensions用来配置扩展名，然后ailas是用来配置路劲别名