webpack_webpack-dev-server用法

目录

• 开发依赖版本
• 用处
• 版本错误纠正
• 修改index.html文件的链接
• 参考链接

开发依赖版本

  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }

用处

• 实时预览，修改css文件或者js文件，保存后无需刷新即可预览文件。
• 通过DevServer启动的webpack会开启监听模式，但不会监听html文件。因为启动时以配置的entry为入口去解析所依赖的文件。所以修改html文件并不会触发更新。

版本错误纠正

webpack-dev-server不支持webpack5.0和webpack-cli4.0，在package.json中做如下配置：

"start": "webpack serve --mode development --env development"

执行npm run start可以执行正常打包

修改index.html文件的链接

DevServer不会例会webpack.config.js里配置的output.path属性，所以要获取到正确的URL是http://localhost:8080/bundle.js

参考链接

webpack5