前面的已经介绍过如何用webpack 打包一个项目&＃xff0c;细心的人会发现&＃xff0c;打包后想要项目运行起来必须要把打包后的项目上传到服务器中&＃xff0c;或者静态的项目也可以在本地直接用浏览器打开。但在实际开发中可能会需要实时预览界面效果&＃xff0c;那么这个时候就需要创建一个本地的HTTP服务器来实现实时预览项目。
然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新&＃xff0c;Source Map 和 反向代理等功能。DevServer会启动一个HTTP 服务器用于服务网页请求&＃xff0c;同时会帮助启动 Webpack &＃xff0c;并接收 Webpack 发出的文件更变信号&＃xff0c;通过 WebSocket 协议自动刷新网页做到实时预览。
DevServer 服务器功能&＃xff1a;
- 提供 HTTP 服务而不是使用本地文件预览
- 支持开发环境http的反向代理
- …
Webpack 原生的功能&＃xff1a;
- 监听文件的变化并自动刷新网页&＃xff0c;做到实时预览
- 支持 Source Map&＃xff0c;以方便调试。
- …
简单的使用案例&＃xff1a;
webpack.config.js
const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; {entry: &＃39;./src/main.js&＃39;,output: {filename: &＃39;bundle.js&＃39;,path: path.resolve(__dirname, &＃39;./dist&＃39;),},devServer: {host: "localhost",port: 9000,proxy: {&＃39;/api&＃39;: {target: &＃39;https://news-at.zhihu.com&＃39;,ws: true, changeOrigin: true }}}
};
1.安装 DevServer 服务器
DevServer 开发工具的全称是&＃xff1a;webpack-dev-server
1.新建一个项目
|-- index.html
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
| |-- common.js
| &＃96;-- main.js
&＃96;-- webpack.config.js
package.json
{"name": "testdevserver","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"webpack": "^4.35.3","webpack-cli": "^3.3.6","webpack-dev-server": "^3.7.2"}
}
1.安装HTTP服务器开发工具&＃xff1a;npm install webpack-dev-server&＃64;3.7.2 --save-dev
2.编写启动服务器脚本&＃xff1a;
"dev": "webpack-dev-server" 或者 "dev": "webpack-dev-server --hot --devtool source-map"
3.编写项目打包脚本&＃xff1a;"build": "webpack --mode production"
webpack.config.js
const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; {entry: &＃39;./src/main.js&＃39;,output: {filename: &＃39;bundle.js&＃39;,path: path.resolve(__dirname, &＃39;./dist&＃39;),},devServer: {}
};
common.js
function get(content) {console.log(&＃39;111&＃39;)
}
module.exports &＃61; get;
main.js
const get &＃61; require(&＃39;./common.js&＃39;);
get();
index.html
<html>
<head><meta charset&＃61;"UTF-8">
head>
<body>
<div id&＃61;"app">div>
<script src&＃61;"bundle.js">script>
body>
html>
2.启动本地HTTP服务
打开终端&＃xff0c;在项目的根目录执行&＃xff1a;npm run dev 命令, DevServer 就启动了&＃xff0c;这时你会看到控制台有一串日志输出&＃xff1a;
PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev> testdevserver&＃64;1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-serveri &＃xff62;wds&＃xff63;: Project is running at http://localhost:8080/
i &＃xff62;wds&＃xff63;: webpack output is served from /
i &＃xff62;wds&＃xff63;: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-配
[./src/main.js] 89 bytes {main} [built]&＃43; 19 hidden modules........
i &＃xff62;wdm&＃xff63;: Compiled successfully.
这意味着 DevServer 启动的 HTTP 服务器监听在 http://localhost:8080/ &＃xff0c;DevServer 启动后会一直驻留在后台保持运行&＃xff0c;访问这个http://localhost:8080/网址你就能获取项目根目录下的 index.html。 用浏览器打开这个地址你会发现页面引用的 bundle.js文件自动输出到了项目的根目录&＃xff0c;原因是 DevServer 会把 Webpack 构建出的文件保存在内存中&＃xff0c;在要访问输出的文件时&＃xff0c;必须通过 HTTP 服务访问。 由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性&＃xff0c;所以要获取 bundle.js的正确 URL 是 http://localhost:8080/bundle.js&＃xff0c;对应的 index.html 应该为&＃xff1a;
2.配置-port和host
https://www.webpackjs.com/configuration/dev-server/#devserver-host
webpack.config.js
const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; {entry: &＃39;./src/main.js&＃39;,output: {filename: &＃39;bundle.js&＃39;,path: path.resolve(__dirname, &＃39;./dist&＃39;),},devServer: {host: "localhost",port: 9000,}
};
打开终端&＃xff0c;在项目的根目录执行&＃xff1a;npm run dev 命令, DevServer 就启动了&＃xff0c;这时你会看到控制台有一串日志输出&＃xff1a;
PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev> testdevserver&＃64;1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-serveri &＃xff62;wds&＃xff63;: Project is running at http://localhost:9000/
i &＃xff62;wds&＃xff63;: webpack output is served from /
i &＃xff62;wds&＃xff63;: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-配
[./src/main.js] 89 bytes {main} [built]&＃43; 19 hidden modules........
i &＃xff62;wdm&＃xff63;: Compiled successfully.
2.配置-hot
除了通过重新刷新整个网页来实现实时预览&＃xff0c;DevServer 还有一种被称作模块热替换的刷新技术。 模块热替换能做到在不重新加载整个网页的情况下&＃xff0c;通过将被更新过的模块替换老的模块&＃xff0c;再重新执行一次来实现实时预览。
webpack.config.js
const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; {entry: &＃39;./src/main.js&＃39;,output: {filename: &＃39;bundle.js&＃39;,path: path.resolve(__dirname, &＃39;./dist&＃39;),},devServer: {host: "localhost",port: 9000,hot: true}
};
3.配置-proxy
下面的案例是发起一个ajax请求&＃xff1a;https://news-at.zhihu.com/api/4/news/latest 这个接口。如果没有使用代理会出现跨越的问题。那么如何配置开发环境HTTP服务器的代理呢&＃xff1f;看下面案例代码&＃xff1a;
common.js
function get(content) {fetch(&＃39;/api/4/news/latest&＃39;).then((r)&＃61;>{console.log(&＃39;r&＃61;&＃39;,r)return r.json()}).then((res)&＃61;>{console.log(&＃39;res&＃61;&＃39; ,res)})}
module.exports &＃61; get;
webpack.config.js
const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; {entry: &＃39;./src/main.js&＃39;,output: {filename: &＃39;bundle.js&＃39;,path: path.resolve(__dirname, &＃39;./dist&＃39;),},devServer: {host: "localhost",port: 9000,proxy: {&＃39;/api&＃39;: {target: &＃39;https://news-at.zhihu.com&＃39;,ws: true, changeOrigin: true }}}
};
注意&＃xff1a;如果url开头包含http协议和端口会匹配失败&＃xff0c;导致代理失败
结论&＃xff1a;
当在webpack.config.js中配置devServer 项时&＃xff0c;先要安装webpack-dev-server, DevServer 会启动一个 HTTP 服务器用于服务网页请求&＃xff0c;同时会帮助启动 Webpack&＃xff0c;并接收 Webpack 发出的文件更变信号&＃96;&＃xff0c;通过 WebSocket 协议自动刷新网页做到实时预览。
源码下载
京公网安备 11010802041100号