【Webpack基础】使用WebpackDevServer

目录 1. WebpackDevServer1.1 基本使用2.4 自动打开2.3 请求转发 ⭐2.3.1 基本使用 2. watch 命令

1. WebpackDevServer

问题：修改了源代码 -> 重新执行 npm run build 进行打包 -> 刷新页面 -> 看到最新的源代码执行的结果

解决：通过 WebpackDevServer 优化流程，提升开发效率

修改了源代码 -> 直接就看到最新的代码执行结果

1.1 基本使用

安装

yarn add -D webpack-dev-server

配置 webpack.config.js，指定服务器根目录

module.exports = {
    ...
    devServer: {
        contentBase: './dist'
    },
	...
}

配置 package.json，添加执行命令

{
	...
    "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
	...
}

执行命令 yarn run dev

每次保存就会看到最新的结果

2.4 自动打开

配置 package.json 文件，将 open 属性设置为 true

module.exports = {
    ...
    devServer: {
        contentBase: './dist',
        open: true
    },
	...
}

2.3 请求转发 ⭐

需求：在 index.js 里面请求获取数据

import axios from 'axios';

axios.get('http://study.jsplusplus.com/Yixiantong/getHomeDatas')
    .then(result => console.log(result.data));
// {foodDatas: Array(2), ktvDatas: Array(2), viewDatas: Array(2), hotelDatas: Array(2), massageDatas: Array(2)}

在实际项目开发的时候，本地的接口和线上的接口不在同一台服务器上

意味着现在写的绝对路径的地址，等上线了以后还得改一下

一般会写成相对路径的地址

import axios from 'axios';

axios.get('/Yixiantong/getHomeDatas')
    .then(result => console.log(result.data));

此时就会报错，因为在这个域名下是没有这个接口的，此时就需要做请求转发

通过 webpack-dev-server 帮助我们把 localhost:8080/Yixiantong/getHomeDatas 的这个请求 转发给 http://study.jsplusplus.com/Yixiantong/getHomeDatas

2.3.1 基本使用

配置 webpack.config.js 的 proxy 属性

module.exports = {
    ...
    devServer: {
        contentBase: './dist',
        open: true,
        proxy: {

		}
    },
	...
}

2. watch 命令

通过 watch 命令 也可以实现，但是有点问题，就是要多刷新几次才能更新

{
	...
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
        "dev": "webpack-dev-server"
    },
	...
}

执行 yarn run watch