《前端》使用webpack+vue从零开始打造前端项目(2020最新版)五--开发环境的配置-devServer--bilibili-2021年1月27日

最新推荐文章于 2022-09-30 10:40:47 发布
最新推荐文章于 2022-09-30 10:40:47 发布
阅读量536 收藏
点赞数
分类专栏： 前端 VUE.JS webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bellediao/article/details/113263629
版权
本文介绍了如何使用webpack-dev-server搭建前端开发环境，包括安装、配置devServer，实现代码变化实时刷新功能。遇到的错误如'webpack-dev-server'不是内部命令的解决方法，以及hot模块替换、代理等常见配置。
摘要由CSDN通过智能技术生成

 

官网：https://www.webpackjs.com/guides/development/

https://www.webpackjs.com/configuration/dev-server/

watch mode（不常见）

webpack-dev-server（常用）

webpack-dev-middleware

 

开发环境配置

（一）devServer

为我们提供了一个简单的服务器，并能够实时重新加载。

作用：实时监控代码变化，帮助我们完成重新打包和刷新浏览器的功能。

1、安装

npm install -D webpack-dev-server

2、修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

    devServer: {

        contentBase: './dist',// 指定服务器根目录

        open:true,// 自动打开浏览器

    },

最低0.47元/天 解锁文章
bellediao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
移动或拷贝vue项目后报错 Error: Cannot find module ‘XXX‘
果酱的博客
11-01 5207
问题描述： 移动文件夹的项目，或者拷贝过来的项目，运行报错Error: Cannot find module 'XXX' 解决方案： 删掉node_modules文件夹，有package-lock.json文件的也要删掉，然后npm install，再运行项目 下面是完整报错信息 PS D:\test> npm run dev > test@0.0.0 dev D:\test > vite internal/modules/cjs/loader.js:883 ...
webpack基本用法
weixin_34223655的博客
12-07 83
1.安装webpack //全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack 2.编写webpack配置文件 webpack.config.js var webpack=require('webpack'); const path=require('path'); ...
webpack笔记一 起步
weixin_30776545的博客
04-23 127
webpack笔记一 起步 安装 对于大多数项目，我们建议本地安装（--save-dev）。这可以在引入突破式变更（breaking change）版本时，更容易分别升级项目。 起步 初始化项目 mkdir webpack-project && cd webpack-project npm init npm install webpack webpack-cli --save-de...
vue项目开发流程从零开始（搭建）
weixin_46392266的博客
01-24 1956
拿到项目： 从零开始 单人 从0开始 原有项目 多人 后续开发 版本管理工具：Git || 码云 开发流程： 1、从零开始 单人 从0开始 步骤： 步骤1：配置SSH 步骤2：创建仓库 步骤3：克隆走SSH协议（注：克隆就是将远程仓库代码下载到本地 步骤4：选择开发框架并生成框架代码 步骤5：选择UI框架并配置 步骤6：将初始化好的本地仓库代码提交到远程仓库（码云 步骤7：使用项目需求管理系统给员工安排任务（码云企业版 或 jira 很多大公司中技术的公司 实现： 步骤1：配置SSH （配置公钥）
vue项目中 日期组件的使用 常用的方法
前端小白的博客
03-31 2507
转换接口中返回的日期格式 例如： 后台返回的时间格式是一串数字。 则：可以使用以下的转换方法。 方法一、 /*时间进行格式化*/ timeFomate(date){ console.log("------",date) if(date == ''){ return "" } var year=date.getFullYear(); var month=date.getMonth()+1;
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
最新发布
09-02
在本文中，我们将深入探讨如何使用Webpack从零开始搭建一个基于Vue3、Sass、Element-Plus和TypeScript的项目。Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS和其他资源，将它们打包成优化过的单一...
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8788
未完
从零开始搭建一个基于Webpack的Vue开发环境
08-12
本教程将详细介绍如何从零开始搭建一个基于Webpack的Vue开发环境。 首先，你需要确保已经安装了Node.js，因为Webpack和Vue.js的构建工具依赖于Node.js环境。你可以通过访问 https://nodejs.org/ 下载并安装最新版本...
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
cesiumjs GIS引擎源码编译并运行-2021年3月18日最新版【1.68~1.79.1版本亲测成功】
耕耘——从菜鸟到高手的蜕变
12-23 2166
cesium源码编译并运行 真传一句话：务必下载正确的源码包，否则搞死不出来（小神若不是历经九九八十一难被坑，也不用费神写此鸡精，本文开头即是妙意所在，好好体悟）。 注意⚠️： 1.必须是下载源码包，不是官方发布包，发布包已经被阉割，出不来“Development”； 2.不同环境可能导致不同的提示或者报错，如果实在找不出问题所在，请查是否系统和nodejs版本及配套编译、打包工具环境是否存在问题。本文测试实验环境为CentOS 8 + Nodejs最新版本。实在搞不定的可QQ联系博主，免费分享经验
internal/modules/cjs/loader.js:883 throw err；
烟雨晴天的博客
03-31 1万+
internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module ‘D:\app.js’  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)  at Function.Module._load (internal/modules/cjs/loader.js:725:27) 
vue的组件\依赖
warrah 南极狼
08-14 1207
yarn vue nvm
初学webpack踩坑: Cannot find module ‘webpack/bin/config-yargs‘
SmellyCat_v的博客
12-24 375
初学webpack踩坑, 运行npm run dev时报错: Error: Cannot find module ‘webpack/bin/config-yargs’ Require stack: /Users/vivien/Desktop/vueProject/webpackStudy/node_modules/webpack-dev-server/bin/webpack-dev-server.js at Function.Module._resolveFilename (internal/modul
webpack学习之四,热加载和热替换
guxiansheng1991的博客
02-07 2650
写在前面 - 使用webpack-dev-server - 开启很简单,但是会有程序书写错误,导致热替换失败 一.基本使用HMR(hot module replacement) 1.webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin
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目录下的文件来处理网络请求。他会监听资源文件，当他们
vue学习总结
huxihua2006的博客
09-30 975
vue学习总结
npm运行命令时抛错
Chain的博客
03-08 2676
sudo npm uninstall npm -g internal/modules/cjs/loader.js:1032 throw err; ^ Error: Cannot find module 'semver' Require stack: - /Users/XXXX/tenv/node/v14.4.0/lib/node_modules/npm/lib/utils/unsupported.js - /Users/XXXX/tenv/node/v14.4.0/lib/node_modul.
解决internal/modules/cjs/loader.js:905报错
Tjohn9的博客
02-05 2万+
D:\vue-admin-template-master>node testMock.js internal/modules/cjs/loader.js:905 throw err; ^ Error: Cannot find module ‘D:\vue-admin-template-master\testMock.js’ ?[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)?[39m.
Vue + Webpack + Vue-loader详解：高级前端开发模式与功能介绍
Vue + Webpack + Vue-loader学习教程之功能介绍篇详细介绍了这两个在现代前端开发中至关重要的工具。首先，Vue-loader是专为Vue.js框架设计的加载器，其核心功能是将.vue文件（Vue组件）转换为JavaScript模块，使得...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值