webpack开发服务器(webpack-dev-server)的简单配置使用

最新推荐文章于 2024-08-10 22:58:28 发布

wangbinXMU

最新推荐文章于 2024-08-10 22:58:28 发布

阅读量1.6k

点赞数

分类专栏：前端 DOM HTML5 文章标签：前端 webpack JS

本文链接：https://blog.csdn.net/wangbinXMU/article/details/84789105

版权

本文介绍了如何配置和使用webpack-dev-server，包括安装插件、配置webpack.config.js、启动开发服务器，以及如何通过package.json简化打包和启动命令。通过这个配置，开发者可以实现页面和依赖的实时自动打包更新。

摘要由CSDN通过智能技术生成

webpack开发服务器(webpack-dev-server)的简单配置使用

配置本地开发服务器。

1）安装webpack-dev-server 插件。
yarn add webpack-dev-server@2.9.7 --dev (版本自定, 我的webpack版本为3.10.0)

2）在webpack.config.js 中添加配置项。

devServer:{
		port:8000,  //端口设置
		// 添加打包文件夹路径
		contentBase:path.join(__dirname,"dist")
},

3）启动开发服务器：node_modules/.bin/webpack-dev-server
页面如下：
在这里插入图片描述
4）浏览器访问：localhost:8000即可。

5）简化打包和启动开发服务器命令。
我们每次都要输入：node_modules/.bin/webpack 打包文件和 node_modules/.bin/webpack-dev-server 启动服务器是比较繁琐的，故我们在package.json文件中添加scripts配置项：