webpack学习(四)— webpack-dev-server
webpack提供给我们检查压缩代码的功能之外,还提供了1个服务器的插件,这就是webpack-dev-server,利用这个差价我们可以启动个web服务器并时时更新我们的修改。
下面以1个简单的例子说明,项目结构:
package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | { "name" : "webpack" , "version" : "1.0.0" , "description" : "测试webpack" , "main" : "index.js" , "scripts" : { "build" : "webpack" , "dev" : "webpack-dev-server --inline --hot --config webpack.config.js" }, "author" : "zouqin" , "license" : "ISC" , "devDependencies" : { "css-loader" : "^0.21.0" , "style-loader" : "^0.13.0" , "webpack" : "^1.12.2" , "webpack-dev-server" : "^1.16.2" } } |
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 | var path = require( "path" ); module.exports = { entry:[ './js/app.js' ], output: { path: path.resolve( './' , "dist" ), publicPath: "build" , filename: "bundle.js" } }; |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title></title> </head> <body> <h1>我是h1标签</h1> <script src= "build/bundle.js" ></script> </body> </html> |
js/app.js
1 | document.getElementsByTagName( 'h1' )[0].style.background= '#0f0' ; |
-------------
以上的目录文件建好之后,用 npm install 安装package.json中声明的依赖。这时候项目根目录下就会生成node_modules文件夹。
接下来,就启动webpack-dev-server。命令参见package.json下的 "scripts"项,用:
1 | npm run dev |
相当于运行了
1 | webpack-dev-server --inline --hot --config webpack.config.js |
还有另外一种方式:在项目根目录下运行:
1 | node node_modules/.bin/webpack-dev-server |
这其实说明了我们的webpack命令是来自node_modules/.bin/webpack-dev-server。我们看github webpack-dev-server官网:
本项目用的在inline模式,没有嵌在frame中。默认的端口号是8080,所以访问地址是:http://localhost:8080/index.html
webpack-dev-server是一个小型的Node.js Express
服务器【1】。既然这样,很多配置是可以设置的。启动端口号可以设置的,下面这个就在8000端口启动:
1 | webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline |
注意:
1)webpack.config.js中的output项,可以这么理解:path是打包的项目路径,用webpack -p 执行。publicPath是webpack-dev-server的路径。
2)webpack-dev-server他将打包后的存在内存中,并没有在工作区生成一个文件。打包文件用,用webpack -p 命令。
3)--hot 是热加载,也就是说,当我们改动文件后保存,浏览器已经自动刷新了我们的修改,不需要按F5,这在我们开发时很方便
4)修改index.html文件,并不会热加载。热加载相关的是入口文件,本例中的是js/app.js文件,修改这个文件,会热加载。
5) 本例没有用css,用了css,并在入口文件js/app.js中require,修改css。也会热加载。同理,如果用了HTML的插件,在入口文件中引入,也会热加载。
6)网上的好多例子,在webpack.config.js这么写:
1 2 3 4 | entry: [ 'webpack/hot/only-dev-server' , "./js/app.js" ], |
多了个'webpack/hot/only-dev-server',实践下来发现去掉完全可以。
参考
【1】https://segmentfault.com/a/1190000006964335
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 深度对比:PostgreSQL 和 SQL Server 在统计信息维护中的关键差异