webpack4 系列教程(十五)：开发模式与webpack-dev-server

最新推荐文章于 2024-05-16 13:08:45 发布
最新推荐文章于 2024-05-16 13:08:45 发布
阅读量1k 收藏 2
点赞数
分类专栏： webpack 系列教程 文章标签： webpack javascript 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AsuraDong/article/details/83245995
版权
本文详细介绍了如何在webpack4中设置开发模式，包括为什么需要开发模式、如何启用它，以及配置webpack-dev-server实现模块热更新、跨域代理和HTML5 History模式。同时，通过实例演示了配置文件和入口文件的编写，帮助开发者理解并掌握开发环境的配置技巧。
摘要由CSDN通过智能技术生成

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | GitHub

0. 课程介绍和资料

本节课的代码目录如下：

本节课用的 plugin 和 loader 的配置文件package.json如下：

{
   
  "scripts": {
   
    "dev": "webpack-dev-server --open"
  },
  "devDependencies": {
   
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }
}

1. 为什么需要开发模式？

在之前的课程中，我们都没有指定参数mode。但是执行webpack进行打包的时候，自动设置为production，但是控制台会爆出warning的提示。而开发模式就是指定mode为development。

在开发模式下，我们需要对代码进行调试。对应的配置就是：devtool设置为source-map。在非开发模式下，需要关闭此选项，以减小打包体积。

在开发模式下，还需要热重载、路由重定向、挂代理等功能，webpack4已经提供了devServer选项，启动一个本地服务器，让开发者使用这些功能。

2. 如何使用开发模式？

根据文章开头的package.json的配置，只需要在命令行输入：npm run dev即可启动开发者模式。

启动效果如下图所示：

虽然控制台输出了打包信息（假设我们已经配置了热重载），但是磁盘上并没有创建/dist/文件夹和打包文件。控制台的打包文件的相关内容是存储在内存之中的。

3. 编写一些需要的文件

首先，编写一下入口的 html 文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
最低0.47元/天 解锁文章
心谭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用webpack和webpack-dev-server
Chad97的博客
02-04 1282
什么是webpack? webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具； webpack解决什么问题？ 合并、压缩、精灵图、图片的Base64编码 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系； … 使用Webpack， 是基于整个项目进行构建的； 借助于webpack这个前端自动化构建工具，...
webpack-core-usage：webpack2完整系列课程，欢迎阅读。同时欢迎移步我的React全家桶文章全集：https：github.comliangklfanglreact-article-bucket
01-31
10. **Webpack Dev Server（开发服务器）**：提供一个本地开发环境，自动编译并实时刷新，支持HMR和其他开发工具。 11. **Babel**：Babel是一个广泛使用的JavaScript编译器，用于将ES6+代码转换为向后兼容的...
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server(2)
最新发布
2401_84446963的博客
05-16 392
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
webpack-dev-server开发模式
落枫秋歌
04-10 711
webpack-dev-server是仅用于项目的开发过程中的一种模式，它的底层借助webpack-dev-middleware中间件利用缓存对webpack管理的静态资源进行快速访问，更够在静态资源更新后自动重载以提高开发效率。并且，在该模式下，可以使用页面展示开发中的效果及错误提示。 安装 npm i webpack-dev-server 使用 在npm的package.js...
webpack4实战四--依赖使用（webpack-dev-server篇）
Locker的博客
11-01 968
前面几篇webpack的文章的操作之后，我们还是需要手动打开dist中的html文件才能启动页面，但现在我们要尝试使用命令的方式启动。 首先是安装插件webpack-dev-server cnpm i -D webpack-dev-server 这个插件不需要像html-webpack-plugin一样在webpack.config.js中导入，安装了便可使用 npx webpack serve 但是，这样写太麻烦了，记住这么多单词挺麻烦的，我们可以在package.json中使用简化的名
devserver配置_Webpack4 常用配置详解
weixin_39601642的博客
11-21 312
入口、出口配置实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下： const SourceMap配置Webpack打包后如果文件出错会把错误指向打包后的文件中的某一行，而我们更需要知道是源文件哪一行出错，这时就需要配置source-map ,在moudule.exports加入以下配置项 mode...
进入Webpack：webpack原始解析系列
02-06
7. **Webpack Dev Server** - 提供实时重载（Hot Module Replacement，HMR）功能，在代码变更后无需刷新页面就能看到更新。 - 本地开发环境的静态服务器，提供快速开发和调试体验。 8. **源码分析（Source Diving...
webpackdemos全网最贴心webpack系列教程和配套代码
08-10
"webpackdemos全网最贴心webpack系列教程和配套代码" 提供了一个全面的学习资源，帮助开发者深入理解和实践 Webpack 的各项功能。 在该教程中，你可以期待学习到以下核心知识点： 1. **Webpack 基础**：了解 ...
react-tutorial-webpack:使用webpack的React教程
05-12
在本文中，我们将深入探讨如何...通过学习这个教程，你可以了解如何配置Webpack以处理React组件，以及如何利用Webpack Dev Server进行高效开发。这不仅有助于理解Webpack的工作原理，也有助于提升你的前端开发技能。
ppt课件-第10章 使用webpack.zip
03-22
12. **npm scripts**：如何通过npm脚本启动Webpack，以及与开发服务器如webpack-dev-server的集成。 这个课件将覆盖以上这些Webpack的核心概念和实际使用技巧，帮助学习者理解和掌握Webpack在前端项目中的应用。...
webpack4.16开发环境配置
骑着代码去流浪
07-12 863
1、安装 sudo npm install -g webpack webpack-cli 安装webpack-cli的目的： CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。 除了webpack自身外，请额外安装webpack-cli来使用CLI。 -&gt; 使用npm安装：npm install webpack-cli -D -&gt;使用yarn安装：y...
webpack dev-server 配置
EmotionComputer
08-29 6657
webpack dev-server
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自动化打包webpack-dev-server
jieyucx的博客
06-13 5278
是一个基于Node.js构建的Web服务器，它可以在本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器，为前端开发提供了很大的便利。支持热模块替换（HMR），即在应用程序运行中更新模块而无需刷新整个页面，它还提供了一些其它的特性包括压缩、编译、转换、代码分离等等。通常用来搭建本地开发环境，而部署时则需要使用其它的Web服务器。
webpack 学习之 devServer
penwa的博客
07-21 465
devServer 在开发模式下提供本地服务器环境 它提供实时更新加载功能，极大提高我们本地开发的效率。 1.使用 使用时需要使用npm安装 // 安装 npm install webpack-dev-server --save-dev webpack-dev-server 的配置项可以通过CLI传入 // 通过 CLI webpack-dev-server --contentBase /path/to/content/dir 也可以通过 webpack.config.js 的 devServer 对象
(了解)webpack的devServer配置信息
小余的前端博客
04-26 1285
回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;而回环地址，是在网络层直接就被获取到了(会被自己捕获到)，是不会经常数据链路层和物理层的。比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的。比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的。：监听IPV4上所有的地址，再根据端口找到不同的应用程序。webpack.comm.conf.js(公共)在Vue项目中再写详细的，暂时跳过。
webpack-dev-server使用方法，看完还不会的来找我~
weixin_34310127的博客
08-21 700
记录下webpack-dev-server的用法. 首先，我们来看看基本的webpack.config.js的写法 module.exports = { entry: './src/js/index.js', output: { path: './dist/js', ...
webpack-dev-ser原理解析
前端361
12-21 1017
webpck-dev-ser作为开发时的服务非常方便，本文将对webpack-dev-server从原理层次解析，来看看它是如何实现服务和热更新的。 1，webpack-dev-server的服务原理 基于express，搭建了一个http服务，根据路由返回不同的内容 2，静态资源服务 webpack-dev-server使用了webpack-dev-middleware，改变了webpa...
Error: Cannot find module 'webpack-dev-server'
05-20
这个错误通常表示你没有安装webpack-dev-server。你可以使用以下命令安装它： ``` npm install webpack-dev-server --save-dev ``` 或者你可以全局安装它： ``` npm install -g webpack-dev-server ``` 如果你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值