WebPack-dev-server搭建本地服务器

文章目录

dev-server简述

用途:实现浏览器自动刷新来显示结果

dev-server是一个可选的本地开发服务器，基于node.js创建，内部使用express框架。Express框架可以服务于某个文件夹，会一直监听其中的代码是否改变。一旦改变会对所有改变的代码重新编译，编译后的代码会由express生成一些新的东西先放入内存，不会映射入盘，不会有任何输出；发布时npm run build才会添加到盘。

服务器读取文件时，存在于盘中的文件，读取速度远远小于内存中的文件。

一、安装&配置dev-server

安装

在终端输入指令：

npm i webpack-dev-server -D

为了确保与其他插件兼容，建议指定版本，不推荐使用极高版本，否则可能出现与webpack-cli不兼容的问题。

配置

在Webpack配置文件（webpack.config.js）中添加devServer对象进行配置，对象内可设置以下属性：

属性	作用
contentBase	指定为哪个文件夹提供服务，默认为webpack.config.js所在的根文件夹。
port	自定义服务器端口号，默认为8080。
inline	布尔值，表示是否启用实时监听模式，页面自动刷新。
historyApiFallback	在SPA页面中启用HTML5 history模式的前置。
compress	布尔值，启用Gzip压缩，减小文件体积并加快加载速度。

示例配置：

mode: 'development',     devServer: {         contentBase: resolve(__dirname, 'build'),         compress: true,         port: 3000

二、使用dev-server

在VSCode中，您可以在终端执行：

webpack-dev-server(更高版本使用npx webpack-dev-server或npx webpack serve)

在package.json中添加脚本：

"dev": "webpack-dev-server --open"

这样启动服务时会自动打开浏览器。如需独立浏览器控制，去掉--open选项，使用：

npm run dev

总结

通过本文，您学会了WebPack-dev-server的核心知识点。本文内容结合Vue教程和Webpack5.0.0教程整合而成，旨在帮助开发者快速掌握cli工具的使用要点。

如觉得文章实用，请点击右上角的赞赏XD

转载地址：http://lhakk.baihongyu.com/

你可能感兴趣的文章

Navicat导入海量Excel数据到数据库（简易介绍）