使用webpack-dev-server搭建本地服务器

最新推荐文章于 2024-05-08 18:11:51 发布
最新推荐文章于 2024-05-08 18:11:51 发布
阅读量585 收藏
点赞数 1
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43974265/article/details/112722600
版权

webpack提供了一个可选的本地开发服务器 webpack-dev-server，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

第一步：安装

它是一个单独的模块，在使用之前需要先安装它。

安装：npm install --save-dev webpack-dev-server@2.9.0

我使用的webpack版本是3.6.0，webpack-dev-server的版本是2.9.0

第二步：配置

安装好之后我们需要在webpack.config.js文件中添加 dev-server 进行配置。

选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供本地服务，这里我填写./dist
  • port：端口号，默认为8080
  • inline：控制页面是否实时刷新。取值为true或false，当为true时，修改了代码后页面会自动刷新
  • historyApiFallback：在SPA页面中，依赖HTML5的history模式
// webpack.config.js
最低0.47元/天 解锁文章
webchang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack和webpack-dev-server安装配置
hleisurely的博客
07-13 1084
文章目录webpack和webpack-dev-server安装配置安装配置步骤:1.装好node和npm2.全局安装webpack3.建立项目、进入项目根目录4.配置webpack可在项目根目录下安装(不加-g，在项目根目录出现node_modules文件夹，内含html-web-pack-plugin及其依赖包)，也可全局安装(加-g必须sudo)5.在项目根目录运行webpack6.配置webpack-dev-server:可在项目根目录下安装(不加-g，在项目根目录出现node_modules文件夹
webpack---devServer
weixin_43390711的博客
05-18 166
devServer: { // 指定运行代码的目录，一般也是所有资源的输出目录 contentBase: resolve(__dirname, 'dist'), // 监视contentBase目录下所有文件，一旦发生变化就reload watchContentBase: true, watchOptions: { // 让监视更高效 ignored: /node_modules/ }, // 启动gzip压缩 .
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server(1)
最新发布
2401_84619530的博客
05-08 990
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件output: {},module: {
webpack 执行 npx webpack-dev-server 报错 static heartbeatInterval = 1000
m0_58893670的博客
03-09 111
使用 npx webpack-dev-server打包的时候报错 最后发现是因为我安装的node版本 过低 解决方法： 安装高版本node webpack-dev-server v4.0.0+ 要求 node版本必须 >= v12.13.0，webpack >= v4.37.0 ...
想了解Webpack，看这篇就够了
华为云官方博客
10-28 1682
摘要：Webpack是一种前端资源构建工具，一个静态模块打包器。 1. 摘要 Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。 图1-1 Webpack打包流程图 2. Webpack五个核心概念 2.1 Entry 入口(Entry)指示Webp
Webpack——05——使用开发服务器devServer
x1037490413的博客
11-27 451
我们用原来的代码举例，打包其他资源里的代码 当我们打包好之后，build文件夹里生成了index.html文件，但是我们想修改代码，但是显示不出来，运行看到的东西还是之前构建的，重新打包终端输入webpack才行，这样重复打包的过程很麻烦，devServer就是自动帮我们打包的工具，那么如何配置呢？ 开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器） 特点：只会在内存中编译打包，不会有任何输出 启动devServer指令为：npx webpack-dev-server(这个
使用webpack3.0配置webpack-dev-server教程
08-27
在devServer中，我们可以使用hot属性来启用热模块替换特性，但是需要使用webpack.HotModuleReplacementPlugin插件。下面是一个基本的配置示例： ``` const path = require("path"); const webpack = require(...
91pool:node+webpack+webpack-dev-server搭建的多页面网站
04-30
node+webpack+webpack-dev-server搭建的多页面网站 #开发框架 因为是展示类的网站，要考虑兼容IE低版本，所以我选择的是jquery，版本是1.11.3。 由由于是在开发中间提出要兼容移动端，所以没有办法选了个折中的办法...
react-boilerplate:使用webpack-dev-server和react-hot-loader的React样板
05-15
webpack-dev-server是Webpack的一个配套工具，它提供了一个本地开发服务器，可以实时编译和刷新页面。当开发者修改源代码时，服务器会自动重新构建项目并刷新浏览器，大大提高了开发效率。在React-Boilerplate中，...
webpack-develop.zip
11-01
2. **Webpack配置**：在`vue.config.js`文件中，你可以自定义Webpack的配置，比如修改输出目录、设置公共路径、调整webpack-dev-server的端口等。 3. **样式处理**：Vue CLI 3支持预处理器，如Sass、Less等。...
npx webpack-dev-server, module not found
weixin_43814775的博客
10-22 1544
想看Stack Overflow的话：链接 webpack-dev-server 当在Terminal运行 npx webpack-dev-server的时候出现这种Error！ Error: Cannot find module 'webpack-cli/bin/config/config-yargs' Require stack: - D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-s
【webpack】DevServer运行时webpack-dev-server插件报错：Cannot find module ‘webpack-cli/bin/config-yargs
这道题我不会做...不会做啊..太难了！！
05-13 423
文章目录前言原因解决方法 前言 使用webpack的开发服务器(DevServer)进行热部署时，运行npx webpack-dev-server命令时，运行报错了 原因 本地默认安装的新版webpack5与相关协作的功能包并不兼容 解决方法 因为不想回退webpack版本，所以就查阅官方文档，发现最新的运行命令为：npx webpack serve ...
webpack --- webpack和webpack-dev-server众问题
bylifan的博客
08-13 1842
报错信息： peerDependencies WARNING webpack-dev-server@^2.9.7 requires a peer of webpack@^2.2.0 || ^3.0.0 but webpack@4.39.1 was installed peerDependencies WARNING webpack-dev-server@2.11.5 › webpack-dev...
Webpack devServer 配置及开发环境的配置
专注前端技术，包括Web端、移动端、小程序、APP
06-20 1832
在前面讲过的webpack的简单使用中已经完成了webpack的基本配置，在你完成代码的编写之后，在命令行执行webpack命令打包即可。但是这种方式会比较麻烦，你在开发过程中需要多次进行调试，每次写完代码都需要进行打包就有些浪费时间了，所以我们可以进行配置热编译——devServer的配置。 在你的webpack.config.js文件中，引入下面的配置，接着在控制台进行安装webpack-dev-server ： 安装命令： npm i webpack-dev-server -D 启动devServe
Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
꧁༺ʚvv༒catɞ༻꧂的博客
07-31 1722
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块 使用 cnpm 命令 cnpm i webpack-dev-server -D 安装 webpack-dev-server 把这个工具安装到项目的本地开发依赖，这个 工具的用法 和 webpack 命令的用法，完全一样。由于，我们是在项目中，本地安装的 webpack-dev-server , 所以，无法把它当做 脚本命令，在powershell 终端中直接
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 w
肖肖的博客
10-30 2029
/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./src/views/404.vue 4:14-446 13:3-17:5 14:22-454 @ ./src/views/404.vue @ ./src/router/index.js @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/clie
解决 webpack5安装 webpack-dev-serve报错python问题 gyp ERR
kzj0916的博客
09-20 413
安装 webpack-dev-serve 执行指令：npm install webpack-dev-server -D 发现并没有老老实实给我们安装，而是报了一大堆错误，如下 报了一大堆Python相关错误 查了一大堆博客都没有找到解决方案 最后通过指定版本的方法解决了 解决方案 指定版本进行安装即可解决 执行：npm install webpack-dev-server@3.11.2 -D 安装成功！！ 防止大家踩坑 ...
2、webpack4.0 webpack-dev-server以及html模板
YmwWow的博客
05-12 1210
1、webpack-dev-server 当我们在写好文件的时候，index.html只能手动打开来看效果，所以这里介绍使用webpack-dev-server写一个服务，在浏览器中打开 localhost：8080 形式 ，这样就比较方便 安装webpack-dev-server，打开项目的终端 yarn add webpack-dev-server -D //开发环境中才会...
npx webpack-dev-server后都报的哪些恶心错误（各类版本不符）
elephant230的博客
05-13 1647
webpack4的各项版本匹配
webpack-dev-server' は、内部コマンドまたは外部コマンド、 操作可能なプログラ
09-19
除了热重载和自动刷新功能，"webpack-dev-server"还提供了其他有用的功能，例如代理服务器、本地请求拦截、HTTPS支持等。你可以根据自己的需求进行配置，并与其他工具（如Babel、ESLint等）结合使用。 总之，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值