自动打包插件webpack-dev-server的安装、配置及使用

最新推荐文章于 2024-08-10 22:58:28 发布
最新推荐文章于 2024-08-10 22:58:28 发布
阅读量1w 收藏 14
点赞数 2
分类专栏： 前端 文章标签： webpack js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Piconjo/article/details/105726663
版权
本文详细介绍了webpack-dev-server的安装、配置和使用方法，包括如何在package.json和webpack.config.js中设置参数，如自动打开浏览器、更改服务器端口号、指定默认访问路径和开启热重载功能，以实现Webpack的自动打包编译和无刷新更新。
摘要由CSDN通过智能技术生成

1、介绍：

webpack-dev-server插件可以实现Webpack的自动打包编译
这样 就不需要每次修改完代码都重新手动输入webpack打包了

2、安装：

在项目的根路径下输入：cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖中
在这里插入图片描述
该工具的用法和webpack命令的用法完全一致 直接输入命令即可自动监听

在项目中本地安装的webpack-dev-server无法作为脚本命令直接运行
因此 需在package.json中进行配置：
在这里插入图片描述

3、使用：

配置之后 输入npm run dev运行 默认启动在8080端口：
在这里插入图片描述

注：webpack-dev-server若要正常运行 必须在项目的本地安装webpack(即使安装了全局的也不行)

启动之后 每次Ctrl+s保存JS代码 webpack-dev-server都会自动重新编译：
在这里插入图片描述
此时 访问8080端口 显示的是项目根目录下的所有文件和文件夹 因为默认托管的目录就是项目根目录在这里插入图片描述
在页面里若要访问打包好的bundle.js 直接通过/bundle.js访问即可 前面无需带上域名：
在这里插入图片描述
该bundle.js是自动生成的 且会自动随着代码改变重新编译
页面中引入了该/bundle.js之后 每次保存js代码 无需手动刷新浏览器页面即可显示最新效果

<!DOCTYPE html>
<html lang="en">
<head>
最低0.47元/天 解锁文章
Piconjo_Official
关注
专栏目录
28 webpack-dev-server安装、使用、设置
Civitasv
02-22 376
webpack-dev-server安装、使用、设置
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server(1)
2401_84434880的博客
04-29 351
它是给我们的webpack在编译的过程当中以及在我们的页面上和我们自己编写的js代码的时候，如果想要去判断当前项目的环境，我们都可以通过调用process.env.NODE_ENV来获取环境信息进行逻辑判断，也就是说在这里面定义的变量信息在我们编写的代码中是可以引用到的。我们可以借助一个webpack包cross-env这个包，为什么要使用这个包呢？因为不同平台上我们设置环境变量的方式是不一样的，我们不想为不同的平台编写不同的命令，所以我们借助使用这个包来处理不同平台的差异。1.4.1 安装插件包。
webpack-dev-server的安装与使用
weixin_34392435的博客
03-03 624
安装 局部安装： npm install --save-dev webpack-dev-server@版本号 全局安装： npm install -g webpack-dev-server@版本号 注意：在开始一个项目的各种插件、依赖安装之前，需要npm init一下，编辑项目的各种信息。 域名设置及访问 找到webpack.config.js文件，在里面加上如下代码： ...
Webpack中搭建本地服务dev-server
最新发布
weixin_47342624的博客
08-10 548
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
【webpack】webpack-dev-server的安装
闫小样丶的博客
09-17 3389
爱爱爱
Webpack的Webpack-dev-server安装和配置
princess66的博客
11-01 1452
Webpack的Webpack-dev-server安装和配置
关于安装和配置webpack-dev-server
weixin_72647214的博客
04-18 353
解决方案 推荐将webpack-dev-server webpack-cli webpack 全部不要加版本 直接输入 npm install webpack-dev-server webpack-cli webpack -D
浅谈webpack-dev-server的配置和使用
08-27
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，包括安装、配置dev-server、配置webpack.config.js文件、配置devServer、创建HTML页面和启动webpack-dev-server等步骤。希望对大家的学习有所帮助。
webpack-dev-server的安装使用
热门推荐
qq_42418169的博客
04-13 1万+
安装 运行环境 webpack (version): 前提： webpack-dev-server依赖webpack，我们需要先安装webpack 如果是webpack4以上我们还需要安装webpack-cli npm i webpack -d npm i webpack-cli -d 安装webpack-dev-server npm i webpack-dev-server -d ...
安装与配置webpack-dev-serve
m0_66504310的博客
11-27 5393
安装与配置插件 webpack-dev-serve
Vue课程9-安装和配置webpack-dev-server
geyaoisnice的博客
05-27 182
webpack.config.js { "name": "change-rows-color", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "..
终于彻底搞明白了，webpack-devServer使用、运行流程、实现原理、常用配置项
SmileLife123的博客
09-21 1730
1. webpack-dev-middleware 是什么、如何进行工作的。 2. webpack-dev-server 是什么、如何进行工作的、实现原理是什么。 3. webpack-dev-server 常用配置项static、hot、proxy重点解读。 4. webpack-dev-server 如何使用、其他常用配置项设置。
webpack devServer
肖的博客
10-17 2289
DevServer 该文档主要描述关于devserver的相关配置。(配置同webpack-dev-middleware兼容) devServer(Object类型) 该配置会被webpack-dev-server使用，并从不同方面做定制。 下面是一个例子，使用gzips提供对dist/文件夹下内容的访问。 devServer: { contentBase: path.join(__dirna...
webpack---devServer
weixin_43390711的博客
05-18 179
devServer: { // 指定运行代码的目录，一般也是所有资源的输出目录 contentBase: resolve(__dirname, 'dist'), // 监视contentBase目录下所有文件，一旦发生变化就reload watchContentBase: true, watchOptions: { // 让监视更高效 ignored: /node_modules/ }, // 启动gzip压缩 .
webpack-dev-server
[暂停使用]任先阳
01-02 351
https://www.babeljs.cn/repl/，在线版貌似不能用了，然后做了一个本地的，各种查文档，复习了不少东西... https://share.weiyun.com/56nl9c0 npm i npm run dev 备注 1、... ...
webpack --devserver
冰魂魄的博客
07-28 222
在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。 module.exports = { devServer:{ contentBase:resolve(__dirname,'build'), // 项目构建后路径 watchCont
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值