开发服务器

coderklaus
103 阅读3分钟

默认情况下，我们开发完成的代码，为了调试，我们需要进行如下操作:

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

但是因为这个操作需要重复多次反复执行，所以该操作经常会影响我们的开发效率

我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示， 也就是具备live reloading(实时重新加载)功能

这个时候我们可以使用插件webpack-dev-server

该插件可以在生产阶段，在本地开发一个服务器，为我们提供打包，编译运行和 实时刷新的功能

并且webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中

也就是说webpack-dev-server会通过memory-fs库，将打包后形成的文件直接加载到内存中进行运行，减少了频繁的文件读取和写入操作

# webpack-dev-server 是一个本地的express服务器
# 会自动检测代码的改变，当代码发生修改的时候，会通过HMR自动更新对应的界面
npm install webpack-dev-server -D

// webpack-dev-server有自己的默认配置
// 可以不对webpack-dev-server进行任何配置就可以在本地起一个服务

// webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中
// 这是因为webpack-dev-server使用了一个库叫memfs
"serve": "webpack serve"

基本配置

在index.html中, 依赖了static/public.js

console.log('js in static folder')

此时我们在index.html中引入文件的时候

<script src="./static/public.js"></script>

但是因为对应的静态资源在打包后，会和index.html放置到同一个文件夹下

所以实际引入路径其实是

<script src="/public.js"></script>

所以为了修改这些静态资源路径，就需要使用static

devServer: {
  // public是默认配置
  // 在static的值所对应的数组中的文件 会通过express.static方法将其变为项目的静态文件
  // staitc 在早期的webpack-dev-server配置中 叫做 contentBase
  static: ['public', 'static']
}

  devServer: {
    port: 3000, // 默认 8080    
    // https://webpack.js.org/api/webpack-dev-server/#internalipfamily-v4--v6
    // https://webpack.js.org/configuration/dev-server/#local-ipv4
    host: WebpackDevServer.internalIPSync('v4'), // 主机地址 默认 localhost
    open: true, // 默认 false - 设置为true的时候 在构建完成后会自动打开默认浏览器
    // 采用gzip压缩的文件 会存在如下响应头
    // Content-Encoding: gzip
    compress: true, // 默认 false - 是否为打包后生成的文件开启gzip compression
    // 静态资源文件夹列表
    static: ['public'], // 默认public
    // history路由，在刷新的时候，服务器是没有对应路径的，所有会返回404
    // 设置historyApiFallback为true(默认值为false)后
    // 如果服务器找不到页面，就会返回index.html
    // 此时浏览器就会将对应的path作为路由，从而匹配到正确的组件进行渲染
    // 此时页面就不会出现404错误
    // 底层借助的是connect-history-api-fallback这个第三方库
    historyApiFallback: true,
    // 设置代理服务器 底层使用的是http-proxy-middleware
    proxy: {
      // /api -- 当路由以/api开头时，执行对应的配置
      '/api': {
        // 代理目标地址
        target: 'http://localhost:3000',
        // 路径重写
        // 正则: 替代值
        pathRewrite: {
          '^/api': ''
        },
        // 默认情况下代理服务器不会改变请求头中的host地址
        // 如localhost:8080 通过代理服务器向 localhost:3000 请求
        // 如果changeOrigin值是false(默认值) - 那么对应的host是localhost:8080
        // 如果changeOrigin值是true的时候 - 对应的host值是localhost:3000
        // 如果服务器对请求来源进行验证，需要是同源地址才返回对应数据的时候，非常有用
        changeOrigin: true
      }
    }
  },
avatar
文章
阅读
粉丝