webpack--搭建本地服务器笔记

最新推荐文章于 2024-06-21 23:30:00 发布
最新推荐文章于 2024-06-21 23:30:00 发布
阅读量76 收藏
点赞数 1
分类专栏： vue学习笔记 文章标签： webpack 服务器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caihongqiao8586/article/details/121015680
版权

使用express框架，实现浏览器自动刷新。

安装命令

npm install webpack-dev-server@X.X.X --save-dev  

备注x.x.x是版本号要根据当前使用的webpack对应的版本号

* devserver是webpack中的一个选项，可以设置的属性如下：

        -- contentBase: 为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

        --port ： 端口号

        --inline: 页面实时刷新

        --historyApiFallback:在SPA页面中，依赖HTML5的history模式

在webpack.config,js文件配置修改如下：

 再package.json中再配置另外一个scripts:

        -- open 参数表示直接打开浏览器

 

 

 

不知所欲
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
手把手本地搭建服务器笔记1
坚如磐石
01-27 1347
自己搭建本地服务器的笔记
服务器面试笔记
tsundere_ning的博客
09-01 640
目录 JavaSE 基础 1. JDK 1.8 的新特性 3-1. 值传递和引用传递 3-2. 垃圾回收器 4. 空指针异常[补充常见的异常] : 6. new 字符串 与 赋值字符串的区别 10. 抽象方法是否可以被静态的、本地方法和同步修饰 Servlet部分 0.常见错误 ???? 1. 传输数据时 post 和 get 有什么不同 2. Tomcat 在页面中的路径问题 3.JavaWeb -- Servlet 中request 与 response 3-2. 服务器中转发
自搭建笔记系统（为知笔记）
JiuCi_的博客
03-05 5797
前言 公司用的笔记系统是语雀，但是最近文章都需要登录语雀账号才能看到，这对我们经常需要分享教程给客户带来了极大的不便，刚好最近刚买了一个服务器所以就想自己搭建一个笔记系统。 为知笔记是一款老牌笔记应用了，支持markdown等多功能，最近推出了docker私有化部署的功能，可以支持5个用户，这对我们这个小企业来讲完全够用了 搭建开始 一，官方既然已经推出了docker，那就先安装docker 服务器用的是Centos7 #更新系统 sudo yum upd.
4种类型基本服务器 笔记
weixin_40756000的博客
06-10 743
循环无连接服务器基本流程 循环就是服务器一次只处理一个客户的服务请求，处理完了再去处理下一个。 1创建一个udp套接字 2绑定端点地址，不要绑定具体的ip地址（INADDR_ANY+端口号） 3反复接收来自客户端的请求 4遵循应用程序协议，按照这个协议处理请求，构造响应报文，发送给客户。 数据发送 不论是面向连接的还是无连接的服务器都不能使用connect函数建立连接，因为connect函数只能用...
Leanote——搭建自己的私人笔记服务器
热门推荐
我爱吃豆芽呀
08-07 3万+
话说好记性不如烂笔头，把平常遇到的问题通过笔记记下来对于程序猿来说实在是太有用了，找了一些笔记软件，除了oneNote,大多数都不免费提供云端同步功能。然而微软的服务器感觉速度实在太慢，而且不支持markdown功能。 最后让我找到了leanote,这是一个开源的笔记框架，你可以将它搭建在自己的服务器上。客户端支持windows/Mac/Linux/Android/IOS ,实在是相当强大。最关...
Vue学习笔记-Day8 webpack-dev-server搭建本地服务器
qq_33426324的博客
03-01 151
webpack-dev-server搭建本地服务器 基于node搭建，内部使用express框架。这个服务器的作用相当于就是热部署，我们不需要在每次更改代码后都去重新打包。 基本原理：对代码进行监听，如果发生改变，就重新进行编译，然后将编译生成的东西缓存到内存中，而不像打包后自动写入磁盘。放在内存中，无论是读写速度都比较快，这样方便我们进行开发调试 安装配置 安装webpack-dev-serve...
Webpack-搭建本地服务器 ｜ 青训营笔记
weixin_50945128的博客
08-14 38
theme: condensed-night-purple highlight: a11y-dark 这是我参与「第四届青训营 」笔记创作活动的的第11天 搭建本地服务器 webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpac...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。入门如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-...
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
前端学习笔记100篇之001：前端模块打包工具
superatom01的博客
06-17 838
摘要：常用的前端打包工具有：Webpack、Rollup、Parcel、Browserify、Gulp和Grunt等。这些工具在前端开发中发挥着重要作用，通过自动化处理代码转换、模块打包、性能优化等任务，可以大大提升开发效率和项目质量。下面是这些工具的特点和优缺点：
Webstorm vue项目@路径不能跳转到对应资源,提示Cannot find declaration to go to
最新发布
IT小辉同学
06-21 439
伸手需要一瞬间，牵手却要很多年，无论你遇见谁，他都是你生命该出现的人，绝非偶然。——若无相欠，怎会相见。
浅析Vite本地构建原理
dsgdauigfs的博客
06-21 1197
随着Vue3的逐渐普及以及Vite的逐渐成熟，我们有必要来了解一下关于vite的本地构建原理。对于webpack打包的核心流程是通过分析JS文件中引用关系，通过递归得到整个项目的依赖关系，并且对于非JS类型的资源，通过调用对应的loader将其打包编译生成JS代码，最后再启动开发服务器。了解到webpack的耗时主要花费在打包上，Vite选择跳过打包，直接以以原生 ESM方式提供源码，这样岂不是可以非常快！vite整体思路：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。
webpack总结16--webpack入门学习
g841805的博客
06-21 248
通过前面的内容我们学会了 Webpack 基本使用，掌握了以下功能：
webpack打包gz文件，nginx开启gzip压缩
qq_42372534的博客
06-18 392
webpack4配合"compression-webpack-plugin": "^6.1.2"打包压缩gz。
Linux之旅: 基础知识点的终极指南
小伍的博客
06-18 1331
Linux基础知识点总结
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值