webpack--搭建本地服务器

本文介绍了如何使用webpack-dev-server搭建本地开发服务器,并配置inline、historyApiFallback等选项。同时,讨论了配置文件的分离,包括为何分离、如何创建不同环境的配置文件(如base.config.js、dev.config.js、pro.config.js)以及如何使用webpackMerge进行合并。在遇到npm run build报错时,通过修改package.json脚本和base.config.js中的path解决了问题。
摘要由CSDN通过智能技术生成

webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果
不过它是一个单独的模块,在webpack中使用之前想要先安装它

npm install --save-dev webpack-dev-server@2.9.3

devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
port:端口号
inline:页面实时刷新
historyApiFallback:在SPA页面中,依赖HTML5的history模式

webpack.config.js文件配置修改如下:

devServer:{
	contentBase:./dist,
	inline:true
	},

但是emmmm,我用到软件是vscode的live-server插件,效果也是一样的。但是弹幕上说live-server不能实时监听改变。

这时候运行项目不再是:npm run build
而是 webpack-dev-server
在这里插入图片描述

但是这时候会报错,因为在终端里面敲这个命令,它会默认去全局找,但是它这个是在局部安装的,所以是找不到的。
所以在终端下直接指定:

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值