Webpack的Webpack-dev-server安装和配置

Webpack的Webpack-dev-server安装和配置，进行的每一步都很艰难

在webpack4和5版本中，默认打包入口的文件为SRC下的index.js

默认打包出口是dist下的main.js

通过entry节点指定打包入口，通过Output节点指定打包出口

 entry:path.join(__dirname,'src/index.js'),

__dirname,当前文件的存放路径，（项目根目录，）后面拼接上在当前文件下的路径。

可以写成./src

每次只要一修改源代码，就需要运行一遍webpack，如何让电脑自动生成，需要Webpack里面的插件。

Webpack-dev-server：一按保存，就会自动监听到，生成dist里面的文件，不需要自己手动运行webpack了

（1）npm i webpack-dev-server@3.11.2 –D

在安装之后发现package包里没有显示dev-server的版本信息，运行又出来很多错误，最后发现是package.json包没有保存，保存的时候说不是最新的，需要比较两版，又找了很多方法，发现只需要在比较时将更新的内容添加到旧的里面，然后再保存即可。然后再运行。

目前的版本号为：

{
  "name": "change-rows-color",
  "version": "1.0.0",
  "description": "npm-install-package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "private": "true",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2"
  }
}

（2）在配置的时候注意这里不是server，没有后面的R

"build":"webpack serve"

 

运行成功之后一直是一个动态的光标，退出按ctrl+c

如果要看效果，需要http://localhost:8080/，可看到项目根目录，

（3）注意：只有在命令行里按Ctrl+那个地址才可以打开。（这里直接在网页里打开试了好久都打不开）

（4）有个隐藏的bundle.js文件，这个是内存中的，此时点击SRC是不会变格式的，需要我们将index.html的修改为bundle.js，这样就可以了

 

 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../dist/main.js"></script> -->
    <script src="/bundle.js"></script>
    <!-- 加载内存里的bundle -->
</head>