Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >webpack搭建本地服务器

webpack搭建本地服务器

原创

作者头像

有勇气的牛排

发布于 2023-06-25 15:30:21

发布于 2023-06-25 15:30:21

29400

代码可运行

举报

文章被收录于专栏：有勇气的牛排专栏有勇气的牛排专栏

运行总次数：0

代码可运行

1 介绍

基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
deserver也是作为webpack中的一个选项，选项本身可以设置如下属性

（1）contentBase：为哪一个文件夹提供本地服务，默认是跟文件夹，我们这里可以填写./dist

（2）port：端口号

（3）inline：页面实时刷新

（4）historyApiFallback：在SPA页面中，依赖HTML5的history模式

2 安装

# 安装，提供一个开发时服务
npm install webpack-dev-server@2.9.3 --save-dev

webpack.config.js

module.exports = {
  ...
  devServer: {
    contentBase: './dist',
    inline: true
  }
}

3 启动

# 初始命令
.\node_modules\.bin/webpack-dev-server

# 脚本化（package.json中的scripts设置）
"dev":"webpack-dev-server --open"

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

打包html的plugin

webpack 打包 npm javascript 网站

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。

Qwe7

2022/05/29

7400

12. Vue搭建本地服务

webpack javascript 打包 xcode

本地服务可以提高开发效率. webpack不需要每次都打包, 就可以看到修改后的效果. 本地服务器基于node.js搭建, 内部使用二十express框架. 可以实现让浏览器自动刷新的功能.

用户7798898

2021/03/08

9830

Webpack（三）：使用 plugin 以及本地服务器搭建

webpack javascript html 打包 npm

webpack 自带 BannerPlugin，我们只需要在 webpack.config.js 中配置即可：

Chor

2019/11/07

1.1K0

webpack 配置文件相关解说

babel.js css webpack 打包 javascript

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Krry

2018/09/10

6170

webpack（10）webpack-dev-server搭建本地服务器「建议收藏」

webpack 打包 npm javascript https

当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server

全栈程序员站长

2022/09/19

5680

WebPack 模块化打包工具（上）

java typescript

本篇博文的内容根据入门 Webpack，看这篇就够了该篇文章总结而来，其代码、模块示例、功能拓展部分均有所删减，若是想了解更多关于 WebPack 的详细内容，敬请参考原文

Nian糕

2018/08/21

5510

WebPack 模块化打包工具（上）

webpack 打包 npm html javascript

plugin是插件的意思，通常是用于对某个现有的架构进行扩展。 webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

名字是乱打的

2021/12/23

7380

(4/24) webpack3.x快速搭建本地服务和实现热更新

webpack javascript npm node.js 打包

（1）为了防止版本兼容问题，此处的webpack版本与之前的一致为：webpack@3.6.0。同时这里我们安装的webpack-dev-server版本是2.9.7版本。

wfaceboss

2019/04/08

1.1K0

(4/24) webpack3.x快速搭建本地服务和实现热更新

Webpack学习笔记

css postcss npm 网站 webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

earthchen

2020/09/24

1.4K0

webpack的基础入门

webpack 打包 npm node.js css

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

javascript.shop

2019/09/04

1.5K0

抛开vue-cli，一步步搭建vue+webpack环境

webpack 打包 vue.js npm html

敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮

杨肆月

2019/08/15

5950

抛开vue-cli，一步步搭建vue+webpack环境

webpack-dev-server 使用教程

webpack server 服务器教程配置

webpack-dev-server是我们在开发nodejs必须要掌握的工具，它可以帮助我们快速搭建开发环境。官网介绍如下

Karl Du

2023/10/20

5100

9、webpack从0到1-devServer初探

webpack 打包 npm javascript

讲下解决每次修改文件后需要npm run build重复运行命令打包的问题。 git仓库：webpack-demo 1、问题每次修改完文件内容要编译代码时，需要重复手动运行npm run build就是件很麻烦的事情。 webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码，我这里主要说下第一、二种，相关内容webpack教程里都有。 webpack's Watch Mode webpack-dev-server webpack-dev-middleware 2、Watch模式

Ewall

2020/03/20

6660

Webpack之阿拉丁神灯

webpack 打包网站编程算法 javascript

现今的web，都很丰富，它们拥有着复杂的JavaScript代码，一大堆依赖包，为了简化开发的复杂度，前端世界出现了很多很好的实践方法。

江米小枣

2020/06/15

6130

(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

webpack javascript npm html 打包

通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。

wfaceboss

2019/04/08

7810

(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

[前言]:因为最近在搞****API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”

啦啦啦321

2018/01/03

2.6K0

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

Webpack搭建ES6开发环境（部分摘自网络）

webpack javascript node.js 打包 npm

首先要有node环境，进入Node.js的官网，选择对应系统下载安装包。安装node后集成了npm管理器

江一铭

2022/07/05

2800

Webpack系列——关于Webpack-dev-server配置的点点滴滴

webpack javascript 打包 http https

我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发，我们在使用之前当然需要安装：

用户1515472

2019/07/24

9500

转入门Webpack，看这篇就够了

html 人工智能

2017年8月13日更新，本文依旧最新的webpack3.5.3将代码部分完全重写，所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终

jojo

2018/05/03

1.7K0

webpack——快速入门【一】

打包 webpack 插件配置入门

https://github.com/webproblem/learning-article#webpack

思索

2024/08/16

1450

相关推荐

打包html的plugin

更多 >

有勇气的牛排0

LV.2

这个人很懒，什么都没有留下～

作者相关精选

目录

1 介绍

2 安装

3 启动

加入讨论

的问答专区 >

1合伙人擅长4个领域

相关课程

一站式学习中心 >

轻量应用构建训练营

轻量应用服务器

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

ES Serverless一站式日志分析入门到精通

Elasticsearch Service

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验