webpack搭建本地服务器

fadeaway_shot
153 阅读2分钟

为什么要搭建本地服务器？

为了运行我们开发的代码，我需要有两个操作：

  1. npm run build，编译相关代码；
  2. 通过live server或者直接通过浏览器打开index.html代码，查看效果；

这个过程经常操作会影响我们的开发效率，我们希望当文件发生变化后，可以自动完成编译和展示；

webpack提供了几种可选方式，帮助我们在代码发生变化后自动编译：

  1. webpack's Watch Mode
  2. webpack-der-server（最常用）
  3. webpack-dev-middleware

我们今天主要是看一下如何配置webpack-dev-server

使用webpack-dev-server

webpack-dev-server提供了一个基本的web server，并且具有 live reloading(实时重新加载)功能；

安装：

npm install webpack-dev-server -D
yarn add webpack-dev-server -D

配置：

// webpack.config.js
module.exports = {
    // ......
    devServer： {
        // 自由添加配置
    }    
    // ......
}
​

添加一个可以直接运行dev server的script：

// package.json
{
    "scripts":{
        "serve": "webpack serve"
    }
}

现在，在命令行中运行npm run serve,我们会看到浏览器自动加载页面。

注意：webpack-dev-server在编译之后不会写入到任何输出文件，而是将bundle文件保留在内存中，然后将它们serve到server中。

1679322007741.png

常用的配置

host

指定要使用的主机地址：

  • 默认是localhost；
  • 如果希望其他地方也可以访问，设置为0.0.0.0；
// ......
devServer:{
    host: "0.0.0.0",
}

port

指定监听请求的端口号,默认情况下是8080

open

告诉dev-serve在服务器已经启动后打开浏览器。默认是false，设置为true可以会打开默认浏览器。

compress

是否为静态文件启用gzip compression

1679323364518.png

hot

启用webpack的热模块替换。

默认情况下，HMR（热模块替换）是默认启用的。

1679323701291.png

proxy

proxy是开发中常用的一个配置选项，他的目的设置代理来解决跨域的问题。

//.......
devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:8000',
            pathRewrite: {
              "^/api":""        
            },
            changeOrigin: true,
        },
    },
  },
  • target：表示的是代理到的目标地址，比如/api/users会被代理到http://localhost:8000/api/users
  • pathRewrite：如果不希望/api写入url，用这个重写路径
  • changeOrigin：表示是否更新代理后请求的header中的host地址。

historyApiFallback

解决SPA页面在跳转不存在路由时，返回404页面的问题。

  • boolean值，默认是false

    • 默认值是false，如果设置成true，会返回index.html的内容。

  • object类型的值，可以通过设置rewrites属性

    • 配置form来匹配路径，决定跳转到哪一个页面。

以上全部，谢谢

avatar
文章
阅读
粉丝