04webpack-webpack-dev-server时时跟新的第二种方式

复制代码
webpack-dev-server是webpack官方提供的一个小型Express服务器

 使用它可以为webpack打包生成的资源文件提供web服务。

 

webpack-dev-server 主要提供两个功能：
为静态文件提供服务
自动刷新和热替换(HMR)
安装命令:
npm install --save-dev webpack-dev-server（别忘记安装）


第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新  这种是在webpack.json中去配置的   
直接在package中 写
将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令


       第二种方式   自动打开浏览器 端口号 指定托管的跟目录 启动热刷新  
       在webpack.config.js文件中

       第一步：引入webpack
       const webpack=require("webpack");
 

       第二步:配置
       devServer:{
           open:true,//自动打开浏览器
           port:3000,// 端口号
           contentBase:'src',// 指定托管的跟目录
           hot:true //启动热刷新
       }

       第三步：配置热刷新这个插件的节点
       plugins: [new webpack.HotModuleReplacementPlugin()]
       
       完整代码如下===》

       const path = require("path"); //路径模块
       
       //第2中方式配置webpack
       const webpack = require("webpack");
       
       // 配置文件 暴露出去哦 // 手动的指定入口和出口
       module.exports = {
       entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件
       
       output: {
       //输出相关的配置
       path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去
       filename: "testindex.js" //指定打包好的文件的名称叫什么名字
       },
       
       devServer: {
       open: true, //自动打开浏览器
       port: 3000, //端口号
       contentBase: "src",//指定托管的根目录
       hot: true,  //启动热刷新
       },
       
       plugins: [new webpack.HotModuleReplacementPlugin()]  //这个就是热跟新的配置
       
       };

      启用命令
      npm  run  dev
复制代码

 

复制代码
需要注意的地方
因为现在webpack已经是4了；
所以需要安装npm i  webpack-cli -D 
否者就会报错
Cannot find module 'webpack-cli/bin/config-yargs'
注意下面插件的安装环境
　package.json文件内容如下
          {
            "devDependencies": {
              "webpack": "^4.44.2",
              "webpack-cli": "^3.3.12",
              "webpack-dev-server": "^3.11.0"
            },
            "scripts": {
              "dev": "webpack-dev-server"
            },
            "dependencies": {
              "jquery": "^3.5.1"
            }
          }
复制代码

 

src下的index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/testindex.js"></script>
</head>
<body>
 
    <div>12</div>
    <div>222</div>
    <div>222</div>
</body>
</html>
   注意这里的引用路径，
   因为webapck配置的时候，配置的是src目录下的testindex.js
   此时你更改这里的代码是不会热跟新的；
复制代码

 

src下的main.js

import $ from "jquery";

$(function () {
  console.log("哈哈1-111啊大苏打");
  console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿");
});

 

此时你发现，自动修改js文件，可以热跟新；

但是index.html却不可以热跟新

import $ from "jquery";

$(function () {
  console.log("哈哈1-111啊大苏打");
  console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿");
});

 

posted @   南风晚来晚相识  阅读(218)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
❉
❉
❉