开发依赖版本
"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