配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦耗时操作,可有效简化流程。本文实战演练配置 Webpack Dev Server 的方法与步骤。
在本地开发前端应用时,每次都手动执行 webpack
命令或 yarn build
命令,再去浏览器中访问 dist/index.html
是一件非常麻烦耗时的事情,可以通过配置 Webpack Dev Server 来解决这个问题。实际上 vue-cli 中也配置了 Webpack Dev Server,每次启动 Vue 应用的命令 yarn serve
,本质上就是启动 Webpack Dev Server。
webpack-dev-server
官网地址:https://webpack.js.org/configuration/dev-server/
1 安装依赖
由于我们使用的 webpack
版本是当前最新的5.73.0
、 webpack-cli
版本是4.9.2
, webpack-dev-server
的版本也要使用最新的 4.x
:
yarn add webpack-dev-server -D
当前版本为 4.9.3
。
2 添加运行命令
在 package.json
文件的 scripts
节点中添加启动 webpack dev server 的命令:
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
3 修改 webpack 配置
在 webpack.config.js
中 entry
、 plugins
、mode
同级新增节点 devServer
,基本的配置如下:
// ...
module.exports = {
// ...
devServer: {
port: 9000,
host: '0.0.0.0',
hot: true
},
// ...
}
该配置表示通过url:http://localhost:9000
来访问应用。除了配置端口、允许访问的 host 外,还可以配置 proxy
实现跨域等。更多配置在上面的官网中查看。
4 启动服务
前面已经在 package.json
中配置了 serve
命令,执行 yarn serve
命令启动 webpack dev server。启动成功后在浏览器中访问 http://localhost:9000
即可访问应用。
注意:
- 修改了 webpack 的配置(
webpack.config.js
)需要重启 webpack dev server 才会生效。- devServer 的配置只对本地开发调试有效,不影响编译打包构建(yarn build)的效果。
5 高效开发的配置
5.1 devtool
默认情况下,如果在 js 代码中通过 console.log
打印日志,或程序报错时,浏览器 console
中输出的内容是经过 webpack 打包编译后的代码位置,如下图所示:
点击上图中的 main.js:21
,显示的代码如下:
当代码较多时较难定位问题。可把 devtool
的配置为 source-map
:
// ...
module.exports = {
// ...
devServer: {
// ...
},
devtool: 'source-map',
// ...
}
配置后,重启 webpack-dev-server,点击浏览器控制台中输出的 console.log ,会进入源码对应的位置:
source-map
源码映射,webpack 会自动生成源代码与打包构建后的代码的映射关系的文件(xxx.map),通过该映射文件,找到打包构建后的代码对应的源码,从而使浏览器提示源码文件的位置。
5.2 HMR
HMR:Hot Module Replacement 热模块替换。当修改代码时, webpack 默认会将所有模块全部重新打包编译,整个页面重新加载,速度很慢。HMR 热模块替换支持在程序运行中(webpack-dev-server 已启动),修改哪个模块,就自动修改(替换、添加、删除)该模块,需用全部打包所有模块。
上面 devServer
的配置的 hot: true
已经开启了HMR。开启 HMR 后,修改样式整个页面不会刷新,但 JS 不生效。不过在现代化开发中,vue-loader
等实现了 HMR,例如你修改了 vue 的某个组件,保存后只会替换该组件。
今日优雅哥(youyacoder)学习结束,期待关注留言分享~~
配置Webpack Dev Server 实战操作方法步骤的更多相关文章
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 手撕vue-cli配置——webpack.dev.conf.js篇
const utils = require('./utils') const webpack = require('webpack') const config = require('../confi ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- 你一定喜欢看的 Webpack 2.× 入门实战(转载)
最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的时候是看了 zhangwang 的 <<入门 Webpack,看这篇就够了 ...
- 你一定喜欢看的 Webpack 2.× 入门实战
from:https://www.jianshu.com/p/b83a251d53db?utm_campaign=maleskine&utm_content=note&utm_medi ...
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...
随机推荐
- vue大型电商项目尚品汇(前台篇)day02
现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了. 而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex.router这些都是必备 ...
- UML类图六种关系的总结
在UML类图中,常见的有以下几种关系: 泛化(Generalization):继承的关系,实线带三角形箭头,指向父类. 实现(Realization):实现的关系,虚线带三角形箭头,指向接口. 关联( ...
- layui数据表格导入数据
作为一个后端程序员,前端做的确实很丑,所以就学习了一下layui框架的使用.数据表格主要的问题就是传输数据的问题,这里我用我的前后端代码来做一个实际的分解. 前端部分 可以到layui官网示例中找到数 ...
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- SpringCloud 服务治理
目录 1. Eureka 1.1 Eureka 介绍 1.2 Eureka 快速入门 父工程 Eureka Server(子工程) pom.xml 启动类 application.yml Eureka ...
- 并发编程原理学习:synchronized关键字
概述 关键字synchronized可以修饰方法或者以同步代码块的形式来进行使用,它主要确保多个线程在同一时刻只能有一个线程处于方法或者同步块中,它保证了线程对变量访问的可见性和排他性. 同步代码块 ...
- hyperlpr centos 使用记录
1.下载最新版python3.7 Anacondawget https://repo.anaconda.com/archive/Anaconda3-5.3.1-Linux-x86_64.sh 2.安装 ...
- 《ECMAScript 6 入门》【三、字符串的扩展】(持续更新中……)
前言: 本篇介绍 ES6 对字符串的改造和增强.一.字符的 Unicode 表示法 字符的 Unicode 码点必须在\u0000~\uFFFF之间,\uxxxx形式表示一个字符,其中xxxx表示字符 ...
- 图片放在div中低下会出现一条缝
页面要达到的样子 中间写的是时候是向div里面放一张图片就行了 <head> <link rel="stylesheet" href="reset.cs ...
- 如何手动解析vue单文件并预览?
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...