webpack-dev-server的使用

最新推荐文章于 2025-07-08 22:57:49 发布

qq_320253624

最新推荐文章于 2025-07-08 22:57:49 发布

阅读量993

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_36331657/article/details/86633557

本文详细介绍如何使用webpack-dev-server实现代码的热加载与自动刷新功能，包括安装配置、html-webpack-plugin插件的应用及启动流程。

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

上一篇说到了webpack打包的基本使用将上篇的程序拷贝过来

webpack-dev-server
webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

创建一个新的程序目录，创建webpacktest2目录，将webpack入门程序的代码拷贝进来
并在目录下创
建src目录、dist目录。
将main.js和add.js拷贝到src目录。将add.html拷贝到项目目录
在这里插入图片描述

1.安装配置

使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
!!!注意上面都是本地安装如果需要全局安装加-g,本地安装要进入程序目录
安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。

在这里插入图片描述

2.配置webpack-dev-server

在package.json中配置script

"scripts": {
    "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
  },

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
在这里插入图片描述
devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令

3.配置webpack.config.js

在webpacktest2目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配
置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一
个index.html文件。

1、配置模板文件
将原来的add.html作为模板文件，为了和内存中的index.html文件名区别，注意将add.html中的script标签
去掉，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/> =
    <span v-text="result"></span>
   <!-- <button v-on:click="add1">点我求和</button>-->
       <button v-on:click="add">点我求和</button>
    </div>

</body>


</html>

2 、配置 html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件内容如下:

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'demo.js'    //输出文件     
    },
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'add.html' //**根据index1.html这个模板来生成(这个文件请程序员自己生成**)
})
]
}

3.启动

启动文件：
1、进入 webpacktest2目录，执行npm run dev
2、使用webstorm，右键package.json文件，选择“Show npm Scripts”
双击 dev。
注意：dev就是在package.json中配置的webpack dev server命令。
发现启动成功自动打开浏览器。
修改src中的任意文件内容，自动加载并刷新浏览器。