28 webpack-dev-server安装、使用、设置

最新推荐文章于 2024-06-21 09:27:27 发布

Civitasv

最新推荐文章于 2024-06-21 09:27:27 发布

阅读量348

点赞数

分类专栏： Vue 文章标签： vue webpack server

本文链接：https://blog.csdn.net/qq_40996400/article/details/104445622

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

webpack-dev-server使用

webpack-dev-server的作用类似于热部署。

下面根据一个例子阐述该插件的使用，本博客默认你已经安装好了webpack且已经配置好了相关文件，若你还没完成这一步，请看教程：webpack4.x安装及基本使用。

1 本地安装

npm i webpack-dev-server -D

2 修改package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "server": "webpack-dev-server"
  },

3 添加index.html和index.js

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack初探</title>
    <script src="./bundle.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</body>

</html>

请注意bundle.js的引用路径，我会在后面提到为什么要这样写。

index.js：

// es6导入包
import $ from "jquery";

$(function() {
  $("li:odd").css("backgroundColor", "yellow");
  $("li:even").css("backgroundColor", function() {
    return "#" + "D97634";
  });
});

4 运行命令

npm run server

运行了此命令后，便开启了热部署。

5 查看效果

在浏览器中输入网址：http://localhost:8080/src/，即可打开该项目。

此时修改index.js中的内容，网页也会相应改变了，这是通过改变http://localhost:8080/bundle.js文件以达到该效果的，即webpack-dev-server会随着index.js的变化而动态的在虚拟根目录下生成打包的bundle.js文件，使得网页内容动态的发生改变，请注意这一过程并不是动态的覆盖出口文件而进行的，这是为了速度更快。

6 一些常用设置

配置编译后即打开浏览器、默认3000端口、打开src目录，热更新：

可以修改package.json：

"server": "webpack-dev-server --open --port 3000 --contentBase src --hot"

也可以在webpack.config.js文件中配置：

devServer: {
    open: true,
    port: 3000,
    contentBase: "src",
    hot: true
  }

Civitasv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
28 webpack-dev-server安装、使用、设置

webpack-dev-server安装、使用、设置
复制链接

扫一扫

专栏目录