webpack-安装webpack、webpack-dev-server与webpack-cli

最新推荐文章于 2024-02-17 23:19:14 发布
最新推荐文章于 2024-02-17 23:19:14 发布
阅读量3.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 【VUE】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shenzhen_zsw/article/details/81039908
本文介绍了如何使用 npm 安装 Webpack 和相关依赖来搭建一个基本的 Webpack 开发环境。通过一系列命令，如 npminstall webpack --save-dev、npminstall webpack-dev-server --save-dev 和 npminstall webpack-cli，读者可以跟随步骤快速配置好本地的 Webpack 项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

npm init demo

npm install webpack --save-dev

npm install webpack-dev-server --save-dev

D:\Development\web\webpack-study>npm install webpack-cli

D:\Development\web\webpack-study>npm run dev

 

 

http://127.0.0.1:8888/

 

 

 

 

 

 

 

 

webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1319
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器，开发阶段使用1、安装webpack-dev-server（开发时依赖）2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错： webpack-dev-server搭建本地服务器，开发阶段使用 webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页
安装webpack，webpack-cli，webpack-dev-server（版本一定要兼容！）
热门推荐
AshleyXM的博客
03-26 1万+
ps：仅记录个人经验，如有错误欢迎指出与讨论，谢谢！ 最近学习vue要安装webpack，webpack-cli，webpack-dev-server，由于它们的版本经常会更新导致不兼容，今天安装了一上午，一直各种报错，最后找到了一个可行方案： webpack 4.41.5 webpack-cli 3.3.10 webpack-dev-server 3.10.1 以上这三个版本搭配是可行的！ （一）卸载不兼容版本 如果之前安装了其他不兼容版本可以先卸载掉！ npm uninstall webpack -g
webpack与webpack-dev-server的区别
xiaoxu的博客
08-27 8788
webpack webpack-dev-server 二者的区别 webpack 一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 每个依赖项随即被处理，最后输出到output字段指定的文件中 main.js引入child1.js、chi...
webpack-dev-server和webpack-cli的版本兼容问题
weixin_48079602的博客
04-21 3522
webpack-dev-server @3.x的版本只能和webpack-cli @3.x的版本配合使用 参考： https://github.com/webpack/webpack-dev-server/issues/2759 https://www.cnblogs.com/jeacy/p/13864454.html
【webpack】webpack-dev-server的安装
闫小样丶的博客
09-17 3653
爱爱爱
webpack\webpack-cli\webpack-dev-server的配置使用
QB哥欢迎您
07-08 2833
webpack5一路踩坑
webpack-使用webpack-dev-server.rar
04-12
要使用 `webpack-dev-server`，首先需要安装它作为项目的开发依赖： ```bash npm install --save-dev webpack-dev-server ``` 然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript ...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且...npm install --save-dev html-webpack-externals-pl
webpack-dev-server-waitpage:Webpack-dev-server的Webpack进度等待页面
04-28
webpack-dev-server-waitpage Webpack Webpack进度等待页面 不用等待webpack完成编译，而可以看到一个不错的进度等待页面。 安装 npm npm install -D webpack-dev-server-waitpage 纱 yarn add -D webpack-dev-...
web-webpack-plugin：替代html-webpack-plugin
02-03
npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-webpack-plugin' ) ; 特征 输出html文件 webpack配置 module . exports = { entry : { A : './a' , B : './b' , ...
webpack，webpack-cli,webpack-dev-server,html-webpack-plugin版本兼容，测试可用
m0_61317636的博客
10-04 250
webpackcli和webpack-dev-server兼容问题
qq_42683219的博客
02-22 3105
项目配置 "devDependencies": { "cross-env": "^7.0.3", "html-webpack-plugin": "^5.2.0", "ts-loader": "^8.0.17", "webpack": "^5.23.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" } 当使用官方给出方式启动webpack-dev-server时会报错， node:in
浅析vue cli的webpack配置属性 devServer 详解 和 devServer.proxy 工作原理解析
qq_47443027的博客
07-25 6502
https://cli.vuejs.org/zh/config/#vue-config-js
webpack（10）webpack-dev-server搭建本地服务器
weixin_43880991的博客
07-13 258
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们...
Webpack安装（开发环境）
weixin_57696123的博客
01-08 856
什么是webpack webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 Webpack基本概念 入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 输出(Output)：指示 webpack 打包后的资源 bundles
WEBPACK 安装与使用
weixiaoderensheng的博客
10-19 189
WEBPACK-4 安装与使用 安装: webpack webpack-cli 命令工具  npm install webpack webpack-cli --save-dev 执行: 以下命令查看是否安装成功 ./node_modules/.bin/webpack -v ./node_modules/.bin/webpack-cli -v 简单的案例开始 目录结构  ...
webpack的使用（上）
qq_53911056的博客
02-17 2923
在项目中安装和配置webpack、配置打包的入口与出口、配置webpack的自动打包功能、配置 html-webpack-plugin 生成预览页面、配置自动打包相关的参数等相关内容。
webpack安装及基础(1)
yuey0809的博客
02-08 235
安装webpack npm install webpack webpack-cli --save-dev 配置文件 webpack 打包时会默认读取webpack.config.js,其内容运行在Node环境,遵循commomjs mode 当前环境 module.exports = { mode: "development" // "production" 二选一 会被命令覆盖(webpack --mode=development) } entry 入口文件 默认./src/ind.
webpack使用
2201_75783276的博客
03-23 214
5 webpack默认只能打包js，如果想要打包其他的东西，例如css，需要下载css-loader。但是webpack的配置文件，webpack.config.js是运行在node上的，所以要遵循node规范，导出时用module.exports＝{前端项目使用模块化时，如果不整合成一个文件，那么每当遇到一个模块就要请求一次，耗性能，如果打包成一个文件，那就只需要请求一次就够了。src里面的，都是前端代码，遵循Es6规范。webpack是在npm上的，npm属于node，所以要有nodejs环境。
npm i webpack webpack-cli webpack-dev-server -D
最新发布
03-27
<think>嗯，用户想安装Webpack、webpack-cli和webpack-dev-server作为开发依赖。他们可能遇到了版本兼容的问题，因为引用里提到过版本不兼容时需要卸载重装。首先，我需要确定正确的安装命令，并且确保版本兼容。 根据引用[2]，安装时需要指定兼容版本。用户可能之前装过其他版本，导致错误，所以应该先卸载旧版本。然后，安装特定版本的包。例如，webpack@5.42.1、webpack-cli@4.7.2和webpack-dev-server@3.11.2。这样组合应该是兼容的，因为引用[1]和[2]都提到了这些版本。 用户的问题是如何用npm安装并添加到devDependencies。正确的命令应该是npm install -D加上具体版本号。还要提醒用户检查package.json里的devDependencies是否正确，以及是否需要配置scripts和webpack.config.js。此外，可能还要提到版本冲突时的解决方法，比如使用npx或查看官方文档确认兼容性。 需要分步骤回答，先卸载旧版本，再安装新版本，并验证安装。还要注意不同项目可能需要不同的版本，所以最好根据项目需求调整。最后，可能还需要初始化npm项目，如果还没有package.json的话，但用户可能已经执行过npm init -y了，如引用[1]所示。</think>要正确安装 Webpack 及其相关工具作为开发依赖，请按以下步骤操作： ### 1. 清理旧版本（可选） 若之前安装过不兼容版本，建议先执行全局卸载： ```bash npm uninstall webpack webpack-cli webpack-dev-server -g ``` 本地项目卸载： ```bash npm uninstall webpack webpack-cli webpack-dev-server ``` ### 2. 安装指定版本组合 ```bash npm install webpack@5.42.1 webpack-cli@4.7.2 webpack-dev-server@3.11.2 --save-dev ``` 该版本组合经过验证兼容性[^1][^2] ### 3. 验证安装 查看 package.json 的 devDependencies 字段应包含： ```json "devDependencies": { "webpack": "^5.42.1", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" } ``` ### 4. 补充配置 在 package.json 中添加启动脚本： ```json "scripts": { "start": "webpack-dev-server --mode development" } ``` ### 版本冲突处理建议 若需安装其他版本，可参考官方兼容性对照表： $$ \text{Webpack 5.x} \leftrightarrow \text{webpack-cli 4.x} \leftrightarrow \text{webpack-dev-server 3.x/4.x} $$ 最新版本建议使用： ```bash npm install webpack@latest webpack-cli@latest webpack-dev-server@latest --save-dev ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值