开发依赖版本
"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
参考链接
原文地址:https://www.cnblogs.com/Syinho/p/14326153.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。