webpack中devServer的使用及其他配置
Posted coder斌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack中devServer的使用及其他配置相关的知识，希望对你有一定的参考价值。
webpack中devServer的使用
为什么要搭建一个服务
我们在在开发阶段，若每次我们修改代码，想看一下实际效果，我们都要在命令行里面输入，相关命令，重新打包，打包会将其他不变的第三方资源也一起打包，平常这些资源我们是不要去操作的，这样及耗费性能，又使我们的开发效率变得很低，我们可以像VS Code 里的 live server一样，提供一个服务，实现热更新。
文件变化重新更新watch
webpack内就提供了这样的一个功能。
在webpack.config.js内设置
在package.json内配置
但有缺陷，这种方法是可以重新打包，但是并不提供一个服务，当然可以配合 live server使用。但是还是不方便。
webapck-dev-server的基本使用
webpack-dev-server可以提供一个服务，并且实现热更新
安装:npm install webpack-dev-server -D
配置：只需要加上 serve,webpack-cli会帮我们自动去加载 webapck-dev-server
devServer的contentBase的配置
在打包过程中，我们找不到的资源，就到我们指定的目录下寻找。 如下配置
contentBase画图的详细解析
devServer模块热替换的应用（HMR）
我们知道webpack-dev-server已经实现了功能，但是每次我们修改完代码，都会帮我们重新打包，页面会整体的刷新操作，有没有，我们只修改了一个文件，只修改了一部分，但是页面只更新修改部分页面，没修改过的我们就不要动它呢？ 这就是模块热替换(HMR)
使用
HMR的原理解析
- devServer会提供两个服务，一个是用于提供资源的( 短连接 )，另一个是专门用于
热模块替换的（长连接） - 短链接 :浏览器主动请求资源，服务器基于相应。 长连接：服务器主动发资源给浏览器。
- 在启动热模块替换后，修改代码，打包完成后，通过长连接对应的服务传给浏览器，由浏览器来对部分页面更新。
devServer的基本配置
host：服务的域名port：服务的端口open：是否自动打开浏览器compress：浏览器像服务请求资源，服务器是否压缩发送给浏览器
devServer中proxy的配置
用来服务器代理解决跨域问题
target要代理的目标地址，如/home会被代理到http://coderbin.link/api/homepathRewrite：默认情况下，我们的 /api 也会被写入到URL中，如果希望删除，可以使用pathRewritesecure默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为falsechangeOrigin：我们使用了服务器代理，请求头会有我们原本服务器的地址，要是我们不想再头部信息出现改为true
webpack中reslove的配置
extensions：我们再引入资源不加后缀，webpack帮我们匹配后缀的规则。mainFiles：我们引入的是一个文件夹，告诉webpack找文件夹下的什么名字的文件alias：起别名，开发中，可能要将文件一来一去，要是，都要修改引用其他资源的地址，起别名可以直接解决。 后面再 Vue项目工程里面会使用到。
webpack开发环境和生产环境分开
我们一般会把生产环境和开发环境分离开，方便我们管理 公共配置 开发配置 和生产配置
多个配置文件合并第三方库 webpack-merge
安装 npm install webpack-merge -D
使用
package.json配置修改
以上是关于webpack中devServer的使用及其他配置的主要内容，如果未能解决你的问题，请参考以下文章