(了解)webpack的devServer配置信息
框架的HMR
- 有一个问题:在开发其他项目时,我们是否需要经常手动去写入 module.hot.accpet相关的API呢?
- 比如开发Vue、React项目,我们修改了组件,希望进行热更新,这个时候应该如何去操作呢?
- 事实上社区已经针对这些有很成熟的解决方案了:
- 比如vue开发中,我们使用vue-loader,此loader支持vue组件的HMR,提供开箱即用的体验
- 比如react开发中,有React Hot Loader,实时调整react组件(目前React官方已经弃用了,改成使用react-refresh)
host配置
-
host设置主机地址:
- 默认值是localhost
- 如果希望其他地方也可以访问,可以设置为 0.0.0.0
//在webpack.config.js中进行设置 devServer:{ hot:true//就刚刚设置的开启热更新 port:8888//看你想要开启哪个端口,你也可以设置0.0.0.0(IP地址) }
-
localhost 和 0.0.0.0 的区别:
-
localhost:本质上是一个域名,通常情况下会被解析成127.0.0.1
-
127.0.0.1:回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收;
正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
而回环地址,是在网络层直接就被获取到了(会被自己捕获到),是不会经常数据链路层和物理层的
比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的
-
0.0.0.0:监听IPV4上所有的地址,再根据端口找到不同的应用程序
比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的
-
port、open、compress
- port设置监听的端口,默认情况下是8080
- open是否打开浏览器:
- 默认值是false,设置为true会打开浏览器(就是当你运行后自己打开浏览器)
- 也可以设置为类似于 Google Chrome等值
- compress是否为静态文件开启gzip compression:
- 默认值是false,可以设置为true(压缩文件的)
Proxy(Vue项目学习)
在Vue项目中再写详细的,暂时跳过
- proxy是我们开发中非常常用的一个配置选项,它的目的设置代理来解决跨域访问的问题:
- 比如我们的一个api请求是 http://localhost:8888,但是本地启动服务器的域名是 http://localhost:8000,这个时候发送网络请求就会出现跨域的问题;
- 那么我们可以将请求先发送到一个代理服务器,代理服务器和API服务器没有跨域的问题,就可以解决我们的跨域问题了
- 我们可以进行如下的设置:
- target:表示的是代理到的目标地址,比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment
- pathRewrite:默认情况下,我们的 /api-hy 也会被写入到URL中,如果希望删除,可以使用pathRewrite
- secure:默认情况下不接收转发到https的服务器上,如果希望支持,可以设置为false
- changeOrigin:它表示是否更新代理后请求的headers中host地址
changeOrigin的解析(Vue项目学习)
在Vue项目中再写详细的,暂时跳过
- 这个 changeOrigin官方说的非常模糊,通过查看源码我发现其实是要修改代理请求中的headers中的host属性:
- 因为我们真实的请求,其实是需要通过 http://localhost:8888来请求的
- 但是因为使用了代码,默认情况下它的值时 http://localhost:8000
- 如果我们需要修改,那么可以将changeOrigin设置为true即可
historyApiFallback (Vue项目学习)
- historyApiFallback是开发中一个非常常见的属性,它主要的作用是解决SPA页面在路由跳转之后,进行页面刷新时,返回404的错误
- boolean值:默认是false
- 如果设置为true,那么在刷新时,返回404错误时,会自动返回 index.html 的内容
- object类型的值,可以配置rewrites属性:
- 可以配置from来匹配路径,决定要跳转到哪一个页面
- 事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的:
- 可以查看connect-history-api-fallback 文档
如何区分开发环境
- 目前我们所有的webpack配置信息都是放到一个配置文件中的:webpack.config.js
- 当配置越来越多时,这个文件会变得越来越不容易维护
- 并且某些配置是在开发环境需要使用的,某些配置是在生成环境需要使用的,当然某些配置是在开发和生成环境都会使用的
- 所以,我们最好对配置进行划分,方便我们维护和管理
- 那么,在启动时如何可以区分不同的配置呢?
- 方案一:编写两个不同的配置文件,开发和生成时,分别加载不同的配置文件即可
- 方式二:使用相同的一个入口配置文件,通过设置参数来区分它们
"scripts":{
"build":"webpack --config ./config/common.config --env production",
"serve":"webpack serve --config ./config/common.config"
}
入口文件解析
- 我们之前编写入口文件的规则是这样的:./src/index.js,但是如果我们的配置文件所在的位置变成了 config 目录,我们是否应该变成 …/src/index.js呢?
- 如果我们这样编写,会发现是报错的,依然要写成 ./src/index.js
- 这是因为入口文件其实是和另一个属性时有关的 context
- context的作用是用于解析入口(entry point)和加载器(loader)
- 官方说法:默认是当前路径(但是经过coderwhy测试,默认应该是webpack的启动目录)
- 另外推荐在配置中传入一个值
//context是配置文件所在目录
module.exports = {
context:path.resolve(__dirname,"./"),
entry:"../src/index.js"
}
//context是上个目录
module.exports = {
context:path.resolve(__dirname,"../")
entry:"./src/index.js"
}
区分开发和生成环境配置
-
这里我们创建三个文件:
-
webpack.comm.conf.js(公共)
-
webpack.dev.conf.js(开发)
-
webpack.prod.conf.js(生产)
分别针对不同的情况去准备
-
//我们使用以下命令用来合并公共部分(对配置进行合并)
npm install webpack-merge -D
//然后就可以使用CommonJS(因为webpack支持这个引入方式)来引用公共部分,引到webpack.dev.config.js跟...prod.config.js
coderwhy留下的题目,我在想要不要补充在这里。那就补充一点点好了
- webpack开发环境跟生产环境有什么区别?
开发环境-development | 生产环境-production | |
---|---|---|
模式(mode) | 在开发模式下,Webpack会更关注速度和开发体验,如输出的代码更容易阅读和调试 | 在生产模式下,Webpack会更关注文件大小和性能优化,如代码压缩和代码分离等 |
插件(plugins) | 在生产环境下,需要使用一些插件来对代码进行优化,如UglifyJsPlugin用于压缩代码,ExtractTextPlugin用于提取CSS文件等 | |
输出文件(output) | 在开发环境下,Webpack通常会将所有的代码打包成一个或多个bundle.js文件 | 在生产环境下,Webpack通常会将不同的代码块(chunk)分开打包,以便于浏览器缓存和更好的加载性能 |
调试工具(devtool) | 在开发环境下,需要方便地调试代码,可以使用一些调试工具,如eval-source-map | 在生产环境下,可以使用一些轻量级的调试工具,如source-map |
- 总之,开发环境和生产环境在Webpack配置上的区别主要是在于性能和调试方面。开发环境更注重开发效率和调试方便,而生产环境更注重性能和文件大小优化