这次给大家带来webpack-dev-server配置与使用步奏详解，webpack-dev-server配置与使用的注意事项有哪些，下面就是实战案例，一起来看一下。
1安装的WebPack-dev-server
在终端输入
npm i webpack-dev-server
登录后复制
安装webpack-dev-server包
2.配置dev-server
在package.json文件中的脚本中添加代码
"dev":"WebPack-dev-server --config webpack.config.js”
登录后复制
在webpack.config.js文件中全局添加
target:"web"
登录后复制
终端输入
npm i cross-env
登录后复制
安装env
配置环境变量
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js","dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
登录后复制
在webpack.config .JS文件中添加语句
const isDev = process.env.NODE_ENV ==='development'
登录后复制
判断isDev的值是否与development相等
将module.exports改为常量的配置并添加语句
module.exports = config
登录后复制
可以方便更改配置
在webpack.config.js中添加语句
if（isDev）{ config.devtool =“＃廉价模块-EVAL-源映射”//代码映射 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页面
终端输入
npm i html-webpack-plugin
登录后复制
安装html-webpack-plugin插件
在webpack.config.js中添加语句
const HTMLPlugin = require('html-webpack-plugin')
登录后复制
配置
plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ]
登录后复制
完成以上步骤后，终端输入
npm run dev
登录后复制
打包完毕之后，打开浏览器，输入地址本地主机：8000即可进入页面
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
应该如何搭建webpack+react开发环境
如何搭建React全家桶环境
以上就是webpack-dev-server配置与使用步奏详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2755110.html
