webpack-dev-server

webpack-dev-server可以热部署

1.运行npm i webpack-dev-server -D

在这里插入图片描述

2.运行npm i webpack webpack-cli -D将webpack安装到本地(即使已经全局安装过)

在这里插入图片描述

3.修改package.json中的dev环境

 {
  "name": "webpackstudy",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",//修改这里
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "description": ""
}

4.命令行运行npm run dev

5.修改index.html中引用js语句

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- <script src="./main.js"></script> -->
    <!-- <script src="../dist/bundle.js" charset="utf-8"></script> -->
    <script src="/bundle.js" charset="utf-8"></script><!--修改此处,注意，此处的bundle.js已经不是磁盘中的bundle.js，而是服务器中的-->
  </head>
  <body>
    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
      <li>这是第10个li</li>
    </ul>
  </body>
</html>

6.访问localhost:8080/

随后就能正常使用

7.webpack-dev-server参数

package.json

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

–open

命令行输入npm run dev后直接打开浏览器

–port

指定打开端口

-contentBase

指定打开的根目录

–hot

热加载

热加载之后每次更新只更新文件，普通加载会重新生成一个js文件

–port

指定打开端口

-contentBase

指定打开的根目录

–hot

热加载

热加载之后每次更新只更新文件，普通加载会重新生成一个js文件