webpack-dev-server 启动服务

它是用来快速搭建本地服务的工具。

1 安装

yarn add webpack-dev-server --dev

2 配置

1. devServer 的配置：webpack.config.js 中配置devServer:

2. package.json 中配置：

"dev": "webpack-dev-server --config build/webpack.config.js --mode development"

3. 此时可以通过 npm run dev 启动我们本地服务。

4. 浏览器访问：http://localhost:8011/index.js 即可看到我们打包后的文件。 5. 在 dist 文件夹下新建 index.html 文件，此时访问 http://localhost:8011(其指向的是 dist/index.html 文件，如果没有，就访问不到) 即可访问我们 index.html 的文件。

3 webpack-dev-server 有用的API

3.1 服务启动后，自动打开浏览器

https: true

module.exports = {
    // ...
    // 开发服务器
    devServer: {
        hot: true, // 热更新
        open: true, // 服务启动后，自动打开浏览器
        useLocalIp: true, // 是否在打包的时候使用自己的 IP
        contentBase: DIST_PATH, // 热启动文件所指向的文件目录
        port: 8011, // 服务端口
        host: '0.0.0.0', // 服务
        historyApiFallback: true, // 找不到的都可替换为 index.html
        proxy: { // 后端不帮我们处理跨域，本地设置代理
            '/api': 'http://localhost:3000', // 接口中有 '/api' 时代理到 'http://localhost:3000'
        },
        https: true,
    }
};