新手使用webpack，webpack-dev-server的一些技巧

最新推荐文章于 2024-09-23 09:51:17 发布

EvaLilys

最新推荐文章于 2024-09-23 09:51:17 发布

阅读量597

点赞数

分类专栏： webpack 文章标签： webpack webpack-dev-server

本文链接：https://blog.csdn.net/EvaLilys/article/details/86591394

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新手使用webpack，webpack-dev-server的一些技巧

目前webpack更新到了4.X，5.x的预发行版也出了，其实有个槽点就是webpack的4.x和3.x的npm命令的区别还是很大的，小伙伴在是一定的时候一定好看清楚你的webpack 的版本是多少。（使用webpack -s查看的前提是你装的是全局的webpack。）

使用webpack-dev-server的时候，要检查一下你的package.json。
在这里插入图片描述
使用npm run dev的时候要注意：
如果你的scripts节点里面没有webpack-dev-server的相关代码，可以手动加上。

如果报了一个错是module里找不到webpack的话，你就要在你的项目里面再装一次webpack.
还有就是webpack的版本和webpack-dev-server的版本对应不起来的话，也是会报错的。

我用的webpack3.8.1可以对应webpack-dev-server2.4.0

版本的对应的话，可以去
https://www.npmjs.com/package/webpack
https://www.npmjs.com/package/webpack-dev-server

在这里插入图片描述
如果是差不多时间发的话，应该是能对上的。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

EvaLilys

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

关于新手在webpack配置vue-loader引入.vue单文件组件执行出错的问题

weixin_44732337的博客

11-05

639

哎，惨！入坑webpack，到处踩雷。本次讲的是基于在 webpack 中引入 vue-loader vue-template-compiler 解析 .vue 单文件组件时，执行 npm run dev 仍然报错。由于可能需要引入 babel 模块解析es6语句，关于如何配置新版本 babel-loader 8.x，请点击 => babel-loader配置关于文件夹大致结构...

react_webpack-4_boilerplate:使用新的webpack-serve，react-hot-loader，CSS-Modules与babel 7的React 16.4和Webpack 4样板

05-02

webpack-serve是Webpack的实时服务器插件，替代了旧版的webpack-dev-server。它提供了更快的启动时间和自动刷新页面的功能，当源代码发生变化时，开发者无需手动刷新浏览器即可看到更新。 6. **react-hot-loader**...

1 条评论您还未登录，请先登录后发表或查看评论

关于webpack的一些配置（第一步：配置前提）

weixin_34342905的博客

03-21

2019独角兽企业重金招聘Python工程师标准>>> ...

webpack小白的安装入门指南

生命中有太多不确定

09-13

237

Webpack安装指南因为大部分小白在接触webpack的时候总是会踩各种坑，因此。本文将像你介绍如何安装webpack 再此过程中，你可能会遇到一些本文没有涉及到的错误，可以参考安装不成功要检查的三个方面 1、前提条件在开始之前，请确保安装了 Node.js 的最新版本因为有墙的缘故，可能导致大家在npm install时卡主的现象，因此在这里建议大家先配置一下目前有两种方法，一种是安装cnpm镜像，另一种则是使用代理，前者可能会遇到一些新的问题，因此本文建议使用第二种方法。打开cmd命

【Webpack】搭建开发服务器详解

最新发布

lph159的博客

09-23

1275

Webpack Dev Server 是 Webpack 提供的一个开发辅助工具，主要功能是通过本地服务器实时刷新页面。自动打包与页面热更新：每当源代码发生变化时，Webpack Dev Server 能够自动重新打包并刷新浏览器。实时预览：允许开发者在本地搭建一个 Web 服务，并实时查看开发进展。模块热替换（HMR）：通过 HMR，代码更新可以直接应用到页面上，而无需刷新整个页面。有时，开发过程中需要向浏览器发送特定的 HTTP 头，Webpack Dev Server 允许通过headers。

webpack安装与基础使用

baiyikai的博客

03-07

180

(cnpm为淘宝镜像，也可以直接用npm) 1.cmd打开需要打包代码所在的文件夹，如workCode 2.cnpm install -g webpack@3.6.0（4.0版本坑很多，建议使用3.6.0） 3.安装好后初始化，cnpm init（为了生成package.json） 4.对项目目录进行安装，cnpm install --save-dev webpack 5.webpack -v,验...

webpack自动化打包webpack-dev-server

jieyucx的博客

06-13

5789

是一个基于Node.js构建的Web服务器，它可以在本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器，为前端开发提供了很大的便利。支持热模块替换（HMR），即在应用程序运行中更新模块而无需刷新整个页面，它还提供了一些其它的特性包括压缩、编译、转换、代码分离等等。通常用来搭建本地开发环境，而部署时则需要使用其它的Web服务器。

关于webpack webpack-cli webpack-dev-server版本问题

zsmxhn的博客

06-07

703

当运行npm webpack-dev-server 时出现以下错误楼主版本为：只需要在package.json中配置 “start”: “webpack serve --open Chrome.exe”（默认打开谷歌），然后以 npm run start命令运行即可

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。

07-27

回答: 当你遇到'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件的错误时，可以尝试以下几种方法解决。首先，你可以执行npm install命令，这是因为可能缺少了某些依赖包。如果这个方法不起...

webpack-zero

05-26

6. **调试与开发**：可以使用 `npx webpack-dev-server` 启动本地服务器进行热更新开发。 7. **扩展配置**：随着项目的进展，可以根据需要添加新的 Loader 和 Plugin，如 Babel（转译 ES6+ 语法）和 ...

webpack-vue:自己使用 webpack构建基于vue的单页面应用

05-15

这个命令会运行 Webpack Dev Server，提供热重载和实时刷新功能，方便我们在开发过程中预览和调试应用。 **Webpack 配置** Webpack 配置文件 `webpack.config.js` 包含了项目的打包规则。在 Vue 项目中，通常需要...

4W字长文带你深度解锁Webpack系列(上)

Yvette Lau的专栏

03-03

381

三篇长文，4W余字，带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。1.webpack 是什么？webpack 是一个现代 Ja...

webpack-dev-server5.0+ 版本问题

gaodda的博客

03-12

691

在使用webpack-dev-server搭建新项目时，需要依赖node 和webpack以及webpack-cli。这是需要注意各个应用之间的版本问题。

webpack.dev.js

海阔天空

03-18

601

let {smart}= require('webpack-merge') //既想要bsae的配置有需要自己的配置 let base =require('./webpack.base'); module.exports =smart(base,{ mode:'development', devServer: {//开发环境 port: 8888,//启动服务的端口 progress: true,//进度条 contentBase: './d

Webpack学习之亲，安装一下（二）

qq_18661257的专栏

04-06

746

webpack-dev-server 配置以及webpack教程

weixin_40254430的博客

02-09

4805

webpack是什么? 一开始我也不理解? 看了许多文档都是在扯淡，摞了一大堆,点子却没说到。当然我说的可能也不对，希望诸位取其精华，去其糟粕。因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。包括在php上，就是php的blade指令。不过php是直接略过了。压根没当回事。是因为什么被搞复杂了。是因为每个人的思维不透明。才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。 webpack其实就两个关.

vue npm run dev报错webpack-dev-server

weixin_30537391的博客

08-19

293

在运行vue项目时报如下问题： E:\mobile_real\mobile-vue>npm run dev > mobile_real@1.0.0 dev E:\mobile_real\mobile-vue > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js ...

Vue项目碰到"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件"报错

大白的博客

05-09

1022

最近公司里做vue项目，svn了前端同事的项目代码，装好环境，运行项目（安装步骤随便百度一下，很详细），控制台里报错“‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件，随机百度解决方法，有的说需要重新装依赖包，有的说扩展用户权限，都做了，但是报错依旧。随机自己新建一个vue项目（https://segmentfault.com/a/1190000009...

查看webpack版本_webpack 上

weixin_39721009的博客

12-11

1710

版本webpack@4安装方法在官网，在webpack后面加个 @4即可学会看文档，如果webpack升级到5了，也可以使用同样思路官网 https://webpack.js.org/使用 npm 或者 yarn// npm npm info webpack version // 查看 webpack 版本号 npm info webpack // 查看 webpack 所有信息 npm in...