webpack读书笔记——devServer

念念不忘
463 阅读4分钟

为什么要搭建本地服务器

目前开发的代码，为了运行需要有两个操作

  1. npm run build编译
  2. 通过live-server或者直接通过浏览器打开html文件，查看效果

为了完成自动编译，webpack提供了几种可选的方式

  • Webpack watch mode
  • Webpack-dev-server
  • Webpack-dev-middleware

Webpack Watch Mode

webpack提供了watch模式:

  • 在该模式下，webpack依赖图中所有文件，只要有一个发生了更新，那么代码将被重新编译。
  • 不需要手动npm run build

如何开启？

方式一：在导出的配置中，添加watch:true

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "js/bundle.js",
        path: path.resolve(__dirname, "build"),
    },
    watch:true,
}

方式二：在启动webapck的命令中，添加--watch标识

npm script:{
 "watch": "webpack --watch"
}
# npm run watch

Webpack DevServer

上面的方式可以监听到文件的变化，但是没有自动刷新浏览器的功能。webpack-dev-server可以实现。这个本地服务器基于node.js构建，它是一个单独的组件，在 webpack 中进行配置之前需要单独安装它作为项目依赖：

安装

通过npm 安装依赖的方式安装 webpack-dev-server

npm install webpack-dev-server -D

devServer配置项

  • contentBase： 该配置项指定了服务器资源的根目录，如果不配置contentBase的话，那么contentBase默认是当前执行的目录,一般是项目的根目录。
  • port： 指定了开启服务器的端口号，默认为8080。
  • host： 配置 DevServer的服务器监听地址，默认为 127.0.0.1。
  • headers： 该配置项可以在HTTP响应中注入一些HTTP响应头。例如：
    headers: {
      'X-foo': '112233'
    }
  • historyApiFallback： 该配置项属性是用来应对返回404页面时定向跳转到特定页面的。一般是应用在单页应用，比如在访问路由时候，访问不到该路由的时候，通过该配置项，设置属性值为true的时候，会自动跳转到 index.html下。当然我们也可以手动通过 正则来匹配路由：
// 跳到index.html页面 
historyApiFallback: true

// 使用正则来匹配路由
historyApiFallback: {
  rewrites: [
    { from: /^\/user/, to: '/user.html' },
    { from: /^\/home/, to: '/home.html' }
  ]
}
  • hot： 该配置项是指模块替换换功能，DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的，但是开启模块热替换功能后，它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的。
  • hotOnly： 默认情况下当代码编译失败修复后会刷新页面，不希望刷新设置hotOnly:true。
  • proxy : 有时候我们使用webpack在本地启动服务器的时候，由于我们使用的访问的域名是 http://localhost:8081 这样的，但是我们服务端的接口是其他的，可以通过该配置来解决跨域的问题。

    • target：标识的是代理到的目标地址，比如 /api/moment 会被代理到http://localhost:8888/api/moment

    • pathRewrite：默认情况下，我们的/api也会被写入到URL中，如果希望删除，可以使用。

    • secure：默认情况下不接受转发到https的服务器，如果希望支持，设置为false。

    • changeOrigin：表示是否更新代理后请求headers中的host地址。

    • historyApiFallback：解决SPA页面在路由跳转后，进行页面刷新返回404的错误。

      • boolean值：默认是false，如果设置为true，刷新的时候，返回404错误时，会自动返回index.html的内容

      • object值：可以配置rewrites属性， 可以配置from来匹配路径，决定要跳到哪个页面，详情查阅官方文档。

// 假设服务端接口域名为：http://news.baidu.com
proxy: {
  '/api': {
    target: 'http://news.baidu.com', // 目标接口的域名
    // secure: true,  // https 的时候 使用该参数
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      '^/api' : ''  // 重写路径
    }
  }
}
  • inline： 设置为true，当源文件改变时会自动刷新页面
  • open： 该属性用于DevServer启动且第一次构建完成时，自动使用我们的系统默认浏览器去打开网页，默认为false，true会打开浏览器， 也可以设置类似于Google Chrome等值。
  • compress： 配置是否启用 gzip 压缩，boolean 类型，默认为 false。
  • overlay： 该属性是用来在编译出错的时候，在浏览器页面上显示错误。该属性值默认为false，需要的话，设置该参数为true。

在 package.json 文件中添加启动命令

修改 npm script，同时可在配置文件中devServer属性下配置devServer：

script:{
    "dev": "webpack-dev-server --open"
}

我们用dev来启动本地服务器， webpack-dev-server就是启动服务器的命令，--open是用于启动完服务器后自动打开浏览器，这时候我们自定义命令方式的便捷性就体现出来了，可以多个命令集成在一起运行，即我们定义了一个dev命令名称就可以同时运行了webpack-dev-server和--open两个命令

现在在终端输入npm run dev 运行服务器

image.png 这样我们就可以在http://localhost:8088/中查看页面 (退出服务器，可使用ctrl+c后，再按y确认即可退出服务器运行)

avatar
文章
阅读
粉丝