Webpack搭建本地服务器

一、搭建webpack本地服务

1.为什么要搭建本地服务器?

目前我们开发的代码,为了运行需要有两个操作:

  • 操作一:npm run build,编译相关的代码;
  • 操作二:通过live server或者直接通过浏览器,打开index.html代码,查看效果

这个过程经常操作会影响我们的开发效率,我们希望可以做到,当文件发生变化时,可以自动的完成 编译展示

为了完成自动编译,webpack提供了几种可选的方式:

  • webpack watch mode;
  • webpack-dev-server(常用);
  • webpack-dev-middleware;

2.webpack-dev-server

上面的方式可以监听到文件的变化,但是事实上它本身是没有自动刷新浏览器的功能的:

  • 当然,目前我们可以在VSCode中使用live-server来完成这样的功能;
  • 但是,我们希望在不使用live-server的情况下,可以具备live reloading(实时重新加载)的功能;

安装webpack-dev-server

npm install webpack-dev-server -D

修改配置文件,启动时加上serve参数:

module.exports = {devServer: {}
}
// package.json
{"scripts": ["serve": "webpack serve --config wk.config.js"]
}

webpack-dev-server 在编译之后不会写入到任何输出文件,而是将 bundle 文件保留在内存中:

  • 事实上webpack-dev-server使用了一个库叫memfs(memory-fs webpack自己写的)

3.认识模块热替换(HMR)

什么是HMR呢?

  • HMR的全称是Hot Module Replacement,翻译为模块热替换
  • 模块热替换是指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个页面;

HMR通过如下几种方式,来提高开发的速度:

  • 不重新加载整个页面,这样可以保留某些应用程序的状态不丢失;
  • 只更新需要变化的内容,节省开发的时间;
  • 修改了css、js源代码,会立即在浏览器更新,相当于直接在浏览器的devtools中直接修改样式;

如何使用HMR呢?

  • 默认情况下,webpack-dev-server已经支持HMR,我们只需要开启即可(默认已经开启);
  • 在不开启HMR的情况下,当我们修改了源代码之后,整个页面会自动刷新,使用的是live reloading;

4.开启HMR

修改webpack的配置:

module.exports = {devServer: {hot: true}
}

浏览器可以看到如下效果:

在这里插入图片描述

但是你会发现,当我们修改了某一个模块的代码时,依然是刷新的整个页面:

  • 这是因为我们需要去指定哪些模块发生更新时,进行HMR;
if (module.hot) {module.hot.accept("./utils.js", () => {console.log("util更新了")})
}

5.框架的HMR

有一个问题:在开发其他项目时,我们是否需要经常手动去写入 module.hot.accpet相关的API呢?

  • 比如开发Vue、React项目,我们修改了组件,希望进行热更新,这个时候应该如何去操作呢?

事实上社区已经针对这些有很成熟的解决方案了:

  • 比如vue开发中,我们使用vue-loader,此loader支持vue组件的HMR,提供开箱即用的体验;
  • 比如react开发中,有React Hot Loader,实时调整react组件(目前React官方已经弃用了,改成使用react-refresh);

6.host配置

host设置主机地址:

  • 默认值是localhost;
  • 如果希望其他地方也可以访问,可以设置为 0.0.0.0;

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地址是可以访问的;

7.port、open、compress

port设置监听的端口,默认情况下是8080

open是否打开浏览器:

  • 默认值是false,设置为true会打开浏览器;
  • 也可以设置为类似于 Google Chrome等值;

compress是否为静态文件开启gzip compression:

  • 默认值是false,可以设置为true;

二、Vue项目配置

1.Proxy(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地址;

2.changeOrigin的解析(Vue项目学习)

这个 changeOrigin官方说的非常模糊,通过查看源码我发现其实是要修改代理请求中的headers中的host属性:

  • 因为我们真实的请求,其实是需要通过 http://localhost:8888来请求的;
  • 但是因为使用了代码,默认情况下它的值时 http://localhost:8000;
  • 如果我们需要修改,那么可以将changeOrigin设置为true即可;

3.historyApiFallback (Vue项目学习)

historyApiFallback是开发中一个非常常见的属性,它主要的作用是解决SPA页面在路由跳转之后,进行页面刷新时,返回404 的错误。

boolean值:默认是false

  • 如果设置为true,那么在刷新时,返回404错误时,会自动返回 index.html 的内容;

object类型的值,可以配置rewrites属性:

  • 可以配置from来匹配路径,决定要跳转到哪一个页面;

事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的:

  • 可以查看connect-history-api-fallback 文档

三、区分开发测试环境

1.如何区分开发环境

目前我们所有的webpack配置信息都是放到一个配置文件中的:webpack.config.js

  • 当配置越来越多时,这个文件会变得越来越不容易维护;
  • 并且某些配置是在开发环境需要使用的某些配置是在生产环境需要使用的,当然某些配置是在开发和生成环境都会使用的;
  • 所以,我们最好对配置进行划分,方便我们维护和管理;

那么,在启动时如何可以区分不同的配置呢?

  • 方案一:编写两个不同的配置文件,开发和生产时,分别加载不同的配置文件即可;
  • 方案二:使用相同的一个入口配置文件,通过设置参数来区分它们;
"script": {"build": "webpack --config ./config/common.config --env production","serve": "webpack serve --config ./config/common.config"    
}

2.入口文件解析

我们之前编写入口文件的规则是这样的:./src/index.js,但是如果我们的配置文件所在的位置变成了 config 目录,我们是否应该变成 …/src/index.js呢?

  • 如果我们这样编写,会发现是报错的,依然要写成 ./src/index.js;
  • 这是因为入口文件其实是和另一个属性时有关的 context

context的作用是用于解析入口(entry point)和加载器(loader):

  • 官方说法:默认是当前路径(但是经过我测试,默认应该是webpack的启动目录
  • 另外推荐在配置中传入一个值;
module.exports = {context: path.resolve(__dirname, "./"),entry: "../src/index.js"
}
module.exports = {context: path.resolve(__dirname, "../"),entry: "./src/index.js"
}

3.区分开发和生成环境配置

这里我们创建三个文件:

  • webpack.comm.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js

webpack.dev.conf.js

const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")module.exports = merge(commonConfig, {mode: "development",devServer: {hot: true,// host: "0.0.0.0",// port: 8888,// open: true// compress: true}
})

webpack.comm.conf.js

const path = require("path")
const { VueLoaderPlugin } = require("vue-loader/dist/index")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require("webpack")module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "../build")},resolve: {extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],alias: {utils: path.resolve(__dirname, "../src/utils")}},module: {rules: [{test: /\.css$/,use: [ "style-loader", "css-loader", "postcss-loader" ]},{test: /\.less$/,use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]},{test: /\.(png|jpe?g|svg|gif)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 60 * 1024}},generator: {filename: "img/[name]_[hash:8][ext]"}},{test: /\.js$/,use: [{ loader: "babel-loader"}]},{test: /\.vue$/,loader: "vue-loader"}]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({title: "电商项目",template: "./index.html"}),new DefinePlugin({BASE_URL: "'./'",coder: "'abc'",counter: "123"})]
}

webpack.prod.conf.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")module.exports = merge(commonConfig, {mode: "production",output: {clean: true},plugins: [new CleanWebpackPlugin()]
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode刷题详解——反转链表

1. 题目链接:206. 反转链表 2. 题目描述: 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1]示例 2: 输入&#xff1…

炫云客户端信用额度如何修改?

现在炫云新注册用户信用额度是100元,但是有人觉得信用额度太高了,想修改信用额度,不知道炫云的信用额度如何修改,今天就教大家如何修改炫云的信用额度。炫云的信用额度在炫云官网和客户端都可以修改。 我们先来看炫云官网如何修改…

【数据结构】归并排序 的递归实现与非递归实现

归并排序 前言一、归并排序递归实现(1)归并排序的核心思路(2)归并排序实现的核心步骤(3)归并排序码源详解(4)归并排序效率分析1)时间复杂度 O(N*logN&#xf…

matlab双目标定中基线物理长度获取

在MATLAB进行双目摄像机标定时,通常会获得相机的内参,其中包括像素单位的焦距(focal length)以及物理单位的基线长度(baseline)。对于应用中的深度估计和测量,基线长度的物理单位非常重要,因为它直接影响到深度信息的准确性。有时候,您可能只能获取像素单位的焦距和棋…

FPGA 如何 固化程序到 FLASH中

1、导出Hardware 2、导出bit文件 3、打开SDK 4、 点击Ok 5、创建工程 6、 输入工程名称:guhua 7、选择 Zynq FSBL 8、单击 guhua、然后点击 build 点击:build all 9、 右键之后,点击:Creat Boot Image 10、点击 Cr…

水库大坝可视化智能远程监管方案,助力安全监测智能巡检

一、背景需求 水库大坝作为防洪度汛的重要设施,其安全问题直接关系到人民群众的生命财产安全。因此,必须加强对大坝水库的安全管理,对水库除险加固和运行管护要消除存量隐患,实现常态化管理,同时要配套完善重点小型水…

Leetcode—485.最大连续1的个数【简单】

2023每日刷题&#xff08;十五&#xff09; Leetcode—485.最大连续1的个数 实现代码 int findMaxConsecutiveOnes(int* nums, int numsSize){int max 0;int i;int flag 0;int cnt 0;for(i 0; i < numsSize; i) {if(nums[i] 1) {if(flag 0) {flag 1;cnt 1;} else {…

ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ks-master-1172.16.33.1661650200KubeSp…

3D人像手办定制业务再掀热潮,这一次有怎样的革新?(方法篇)

最近&#xff0c;3D真人手办热潮再起&#xff0c;最出圈的一次当属亚运会的3D打印元宇宙体验舱里面各国运动员带火的真人手办定制项目。作为3D技术推广者&#xff0c;博雅仔也在后台接受了很多朋友的询问—— ◆ 技术已经成熟了吗&#xff1f; ◆ 个人定做3D真人手办市场价格…

百度百科怎么创建?百科创建需要注意哪些(一文看懂品牌/企业/人物百科创建)

随着互联网的不断发展&#xff0c;许多企业或品牌都选择创建百度百科作为一种很好的展示方式。百度百科可以被视为一张网络名片&#xff0c;拥有它能够提高人物、企业、品牌的知名度和影响力。那么人物百科、企业百科、品牌百科到底怎么创建呢&#xff1f; 大家创建百科前建议先…

3.4_Linux-浏览文件系统

1.Linux 文件系统 如果你刚接触Linux系统&#xff0c;可能就很难弄清楚Linux如何引用文件和目录&#xff0c;对已经习惯Microsoft Windows操作系统方式的人来说更是如此。在继续探索Linux系统之前&#xff0c;先了解一下它的布局是有好处的。 你将注意到的第一个不同点是&…

玻色量子“天工量子大脑”亮相中关村论坛,大放异彩

2023年5月25日至30日&#xff0c;2023中关村论坛&#xff08;科博会&#xff09;在北京盛大召开。中关村论坛&#xff08;科博会&#xff09;是面向全球科技创新交流合作的国家级平台行业盛会&#xff0c;由科技部、国家发展改革委、工业和信息化部、国务院国资委、中国科学院、…

数据结构——顺序表(SeqList)

目录 1. 顺序表介绍 2. 顺序表工程 2.1 顺序表定义 2.1.1 静态顺序表 2.1.2 动态顺序表 2.2顺序表接口 2.2.1 顺序表初始化 2.2.2 顺序表打印 2.2.3 顺序表销毁 2.2.4 顺序表数据插入 2.2.4.1 容量检查 2.2.4.2 顺序表尾插 2.2.4.3 顺序表头插 2.2.4.4 顺序表随机…

人工智能与卫星:颠覆性技术融合开启太空新时代

人工智能与卫星&#xff1a;颠覆性技术融合开启太空新时代 摘要&#xff1a;本文将探讨人工智能与卫星技术的融合&#xff0c;并介绍其应用、发展和挑战。通过深入了解这一领域的前沿动态&#xff0c;我们将展望一个由智能卫星驱动的未来太空时代。 一、引言 近年来&#xf…

lazada商品评论API接口(评论内容|日期|买家昵称|追评内容|评论图片|评论视频..)

Lazada商品评论API接口是Lazada开放平台提供的一种API接口&#xff0c;可以帮助开发者获取Lazada平台上的商品评论数据。 通过该接口&#xff0c;开发者可以获取到用户对商品的评论信息&#xff0c;包括评论内容、评价等级、评论时间等&#xff0c;从而了解用户对商品的反馈和…

微信小程序overflow-x超出部分样式不渲染

把display:flex改成display:inline-flex&#xff0c; 将对象作为内联块级弹性伸缩盒显示&#xff0c; 类似与是子元素将父元素撑开&#xff0c;样式就显示出来了

智信SMS客户端操作手册

登录系统 登录前需查看用户协议输入账号和密码&#xff0c;点击登录即可 首页介绍 登录成功之后&#xff0c;进入操作页面。 操作页面包括&#xff1a;设置、导入手机号、发送短信三大块功能。 如图&#xff1a; 导入手机号 点击首页中的导入按钮&#xff0c;即可导入手机…

微服务框架SpringcloudAlibaba+Nacos集成RabbitMQ

目前公司使用jeepluscloud版本&#xff0c;这个版本没有集成消息队列&#xff0c;这里记录一下&#xff0c;集成的过程&#xff1b;这个框架跟ruoyi的那个微服务版本结构一模一样&#xff0c;所以也可以快速上手。 1.项目结构图&#xff1a; 配置类的东西做成一个公共的模块 …

医疗数据可视化大屏:重构医疗决策的未来

医疗行业一直是信息密集型领域之一&#xff0c;它的复杂性不仅在于患者病历和医疗数据的海量积累&#xff0c;还包括了病情诊断、医疗资源分配、病患治疗等多层次的挑战。随着信息技术的不断发展&#xff0c;医疗数据可视化大屏成为了一种创新性的工具&#xff0c;它为医疗管理…

阿里云推出AI编程工具“通义灵码“;生成式 AI 入门教程 2

&#x1f989; AI新闻 &#x1f680; 阿里云推出AI编程工具"通义灵码"&#xff0c;支持多种语言及实时续写功能 摘要&#xff1a;阿里云推出了一款名为"通义灵码"的AI编程工具&#xff0c;支持多种主流编程语言&#xff0c;包括Java、Python、Go等。该工…