浅谈webpack-dev-server的配置和使用

前端之家收集整理的这篇文章主要介绍了浅谈webpack-dev-server的配置和使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了浅谈webpack-dev-server的配置和使用,分享给大家,具体如下:

1安装的WebPack-dev-server

在终端输入

安装webpack-dev-server包

2.配置dev-server

在package.json文件中的脚本中添加代码

在webpack.config.js文件中全局添加

终端输入

安装env

配置环境变量

在webpack.config .JS文件添加语句

判断isDev的值是否与development相等

将module.exports改为常量的配置并添加语句

可以方便更改配置

在webpack.config.js中添加语句

代码映射 config.devServer = { port:8000,//启动服务监听端口 host:'0.0.0.0',//可以通过localhost访问 overlay:{//在页面显示错误信息 errors:true, },open:true,//启动webpack-dev-server时自动打开浏览器 hot:true //启用热更 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()//热更相关插件 ) }

3.创建HTML页面

终端输入

安装html-webpack-plugin插件

在webpack.config.js中添加语句

配置

完成以上步骤后,终端输入

打包完毕之后,打开浏览器,输入地址本地主机:8000即可进入页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章