webpack配置本地服务器webpack-dev-server

最新推荐文章于 2024-05-07 20:05:29 发布
最新推荐文章于 2024-05-07 20:05:29 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42260975/article/details/92799692
版权

webpack配置本地服务器

今天学习了webpack的本地服务器的配置，配置还是简单好学的，在这过程中由于自己的粗心大意写错了一个单词导致了报错，找了好久才发现问题，忘小伙伴们敲代码的过程中一定要仔细，千万不要像我一样，耽误了不少时间(哭泣~~)。
开始记录新的学习知识吧，走起 ——>

第一步

安装webpack-dev-server
我使用的安装命令是：yarn add webpack-dev-server -D

在这里插入图片描述
第二步

配置webpack.config.js文件

在这里插入图片描述
第三步

配置package.json文件
ps： --open命令可以在启动本地服务器的时候自动在浏览器中打开页面

在这里插入图片描述
第四步

启动本地服务器：npm run dev

在这里插入图片描述
至此，启动成功~~

幸福了，然后呢
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack（10）webpack-dev-server搭建本地服务器
厦门在乎科技
07-13 263
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果 由于它是个单独的模块，使用之前，我们需要先安装，命令如下： npm install -D
webpack-dev-server 配置
暮落的博客
12-27 3460
    1、安装webpack-dev-server cnpm install webpack-dev-server -D 2、package.js同级目录下新建package.config.js文件。代码如下：   module.exports={   entry:'',   output:'',   devServer:{     port:9999,     host:'local...
【Webpack基础】使用WebpackDevServer
小管打天下的博客
06-05 418
问题：修改了源代码 -> 重新执行 npm run build 进行打包 -> 刷新页面 -> 看到最新的源代码执行的结果解决：通过 WebpackDevServer 优化流程，提升开发效率修改了源代码 -> 直接就看到最新的代码执行结果安装 配置 webpack.config.js，指定服务器根目录 配置 package.json，添加执行命令 执行命令...........................
2024年最新详解webpack打包(1)，如何系统全面性学习前端语言
最新发布
2401_84617772的博客
05-07 641
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】on中增加“sideEffects”:false //标识当前项目没有副作用注意你的代码真的没有副作用 css都属于副作用解决方法:在package.json中“sideEffects”:[‘./extend.js’,‘./extnd.css’] 数组进行配置代码分割 Code Splitting并不是每个模块在启动的时候都需要加载 要不然bundle的文件过大根据不同需求 可分为多入口打包动态导入按需加载。
webpack-dev-server 配置以及webpack教程
weixin_40254430的博客
02-09 4085
webpack是什么? 一开始我也不理解? 看了许多文档都是在扯淡，摞了一大堆,点子却没说到。当然我说的可能也不对，希望诸位取其精华，去其糟粕。 因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。 至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。包括在php上，就是php的blade指令。不过php是直接略过了。压根没当回事。是因为什么被搞复杂了。是因为每个人的思维不透明。才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。 webpack其实就两个关.
webpack-dev-server【devServer属性配置】
qq_37833745的博客
11-12 1万+
前言： DevServer是webpack开发服务器。 webpack-dev-server： 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器 特点： 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器 减少磁盘的读取，提高构建效率 写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置 安装：下载安装...
webpack使用笔记（三）配置devServer
qq_42062727的博客
07-30 1000
配置 devServer 之前需要先下载 yarn add webpack-dev-server -D 下载好之后，就可以在 webpack 配置项中去配置 webpack-dev-server 啦。 devServer 的配置项很多，这里只对使用比较多的配置项做一下介绍。devServer 的配置应该是在开发环境下进行。下面是一个简单的配置内容： if(isDev){ // 如果是开发环境 config.devServer = { // 设置 host（默认就是 loc
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
使用webpack3.0配置webpack-dev-server教程
08-27
四、devServer配置对象属性 在devServer中，我们可以配置以下几个常用的属性： 1. contentBase："./" // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可； 2. historyApiFallback：true // 当我们搭建spa...
浅谈webpack-dev-server的配置和使用
08-27
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，包括安装、配置dev-server、配置webpack.config.js文件、配置devServer、创建HTML页面和启动webpack-dev-server等步骤。希望对大家的学习有所帮助。
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：...
webpack系列之webpack-dev-server 及配置HTML插件（html-webpack-plugin）
一起的远方的博客
03-06 5674
上一节补充： 如果存在webpack.config.js文件，则运行npx webpack命令后，将会自动读取文件内的相关配置。我们将webpack.config.js文件名改为webpack.config.my.js文件，那么怎么才能手动指定webpack读取webpack.config.my.js文件里的配置内容呢？别着急，你可以通过如下命令进行实现。 npx webpack --confi...
webpack开发服务器(webpack-dev-server)的简单配置使用
wangbin的博客
12-04 1583
webpack开发服务器(webpack-dev-server)的简单配置使用
webpack-dev-server远程访问配置
jCuckoo的专栏
03-29 8338
下面的package.json文件中配置的webpack-dev-server为开发模式，可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
webpack-dev-server简单使用
热门推荐
高山上的鱼
02-09 5万+
1.webpack-dev-server配置1.1 ContentBasewebpack-dev-server会使用当前的路径作为请求的资源路径，但是你可以通过指定content base来修改这个默认行为:$ webpack-dev-server --content-base build/这样webpack-dev-server就会使用build目录下的文件来处理网络请求。他会监听资源文件，当他们
webpack-dev-server(devServer)
我的博客简介
08-05 623
修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；而是将 bundle 文件保留在内存中，事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）将css提取到一个独立的css文件中。webpack热更新原理。....
webpack打包7之webpack-dev-server开发版配置
qq_40922656的博客
09-06 344
我们不能每次写一次代码就要打包一次看一次效果，为了我们开发方便需要配置一下开发环境，让页面实时刷新，每改一次代码，页面也会跟着刷新，不需要在打包看效果。为了开发效率更快， 1、安装 yarn add webpack-dev-server -D 2、安装完之后配置启动脚本如下 "scripts": { "start": "webpack-dev-server --config webpack.config.js", "build": "webpack --config webpack.c
配置Webpack Dev Server 解决手动执行webpack 或 yarn build 命令繁琐操作
youyacoder的博客
07-29 735
配置 Webpack Dev Server 可以解决本地开发前端应用时，手动执行 webpack 命令或 yarn build 命令，再去浏览器中访问 dist/index.html 是一件非常麻烦耗时的操作，简化流程。本文实战演练配置 Webpack Dev Server 的方法与步骤。......
webpack自动更新插件 webpack-dev-server
weixin_33989058的博客
05-31 271
2019独角兽企业重金招聘Python工程师标准>>> ...
webpack webpack-cli webpack-dev-server配置
08-16
devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值