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-dev-server中如何配置使用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
新闻名称:webpack-dev-server中如何配置使用
网站路径:http://pwwzsj.com/article/jhpepg.html