(资料图片仅供参考)
安装依赖包
yarn add webpack-dev-server -D
常用配置
devServer: { contentBase: path.join(__dirname, "static"), // 告诉服务器从哪里提供内容(默认当前工作目录) openPage: "views/index.html", // 指定默认启动浏览器时打开的页面 index: "views/index.html", // 指定首页位置 watchContentBase: true, // contentBase下文件变动将reload页面(默认false) host: "localhost", // 默认localhost,想外部可访问用"0.0.0.0" port: 8080, // 默认8080 inline: true, // 可以监控js变化 hot: true, // 热启动 open: true, // 启动时自动打开浏览器(指定打开chrome,open: "Google Chrome") compress: true, // 一切服务都启用gzip 压缩 disableHostCheck: true, // true:不进行host检查 quiet: false, https: false, clientLogLevel: "none", stats: { // 设置控制台的提示信息 chunks: false, children: false, modules: false, entrypoints: false, // 是否输出入口信息 warnings: false, performance: false, // 是否输出webpack建议(如文件体积大小) }, historyApiFallback: { disableDotRule: true, }, watchOptions: { ignored: /node_modules/, // 略过node_modules目录 }, proxy: { // 接口代理(这段配置更推荐:写到package.json,再引入到这里) "/api-dev": { "target": "http://api.test.xxx.com", "secure": false, "changeOrigin": true, "pathRewrite": { // 将url上的某段重写(例如此处是将 api-dev 替换成了空) "^/api-dev": "" } } }, before(app) { },}
根据目录结构的不同,contentBase、openPage 参数要配置合适的值,否则运行时应该不会立刻访问到你的首页; 同时要注意你的 publicPath,静态资源打包后生成的路径是一个需要思考的点,这与你的目录结构有关。
package.json 添加运行命令
"scripts": { "dev": "cross-env BUILD_ENV=development webpack-dev-server --mode development --colors --profile"}
不同操作系统传递参数的形式不一样,cross-env 可以抹平这个平台差异。
实用技巧:dev-server 的代码通常在内存中,但也可以写入硬盘,产出实体文件:{ writeToDisk: true,}
通常可以用于代理映射文件调试,编译时会产出许多带 hash 的js 文件,不带 hash 的文件同样也是实时编译的。
有的时候,启动服务时,想要默认使用本地的 ip 地址打开:{ disableHostCheck: true, // true:不进行host检查 // useLocalIp: true, // 建议不在这里配置 // host: "0.0.0.0", // 建议不在这里配置}
同时还需要将 host 配置为0.0.0.0
,这个配置建议在 scripts 命令中追加,而非在配置中写死,否则将来不想要这种方式往回改折腾,取巧一点,配个新命令:
"dev-ip": "yarn run dev --host 0.0.0.0 --useLocalIp",有时启动的时候希望是指定的调试域名,例如:
local.test.baidu.com
:{ open: true, public: "local.test.baidu.com:8080", // 需要带上端口 port: 8080,}
同时需要将127.0.0.1
修改为指定的 host,可以借助 iHost 等工具去修改,各个工具大同小异,格式如下:
127.0.0.1 local.test.baidu.com
服务启动后将自动打开local.test.baidu.com:8080
访问
{ compress: true,}