vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下。
最近在学习webpack,跟着课程一个单页面应用,在这里记录一下。
这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置。
记录比较粗略,后续会更新。
1.开发环境:
vscode,node.js,vue.js,webpack
大家自己安装一下node.js可以参考菜鸟教程
使用的IDE是 VScode2.项目初始化
快捷键ctrl+` 打开vscode控制台
2.1安装webpack vue vue-loader
npm 出现warn提醒你需要依赖,按照提示进行安装
安装相应的loader
2.2配置webpack可以加载app.vue文件
首先创建src文件夹,并在其下创建app.vue最为主代码文件,index.js作为入口文件。
app.vue文件内容如下:
在src同级目录下
创建webpack.config.js文件,配置入口entry,输出output
创建package.json文件和webpack.config.js文件
index.js文件作为入口
配置package.json文件中的scripts命令,添加build
配置package.json文件中的scripts命令,添加build
在控制台输入npm run build 命令进行打包,打包成功后如图:
webpack打包完成后
2.3配置webpack可以加载非Js文件
webpack.config.js文件具体配置
在webpack.config.js中的module: {}模块中添加rules:[],可以设置webpack需要识别的文件类型,之前已经设置了vue文件类型,好需要添加css/图片。
在控制台执行命令,安装相应的loader
测试非js类型文件打包效果
目标:在js代码中import这些非js类型的文件中的内容
再src子目录下,创建测试文件test.css。以及在images中放入jpg图片代用(一张就可以了,emmm我当时放多了就先不删了)
在Index.js中import这些非js文件。
最后在控制台执行 npm run build 测试结果。
打包成功图片类似上面。
2.4关于css预处理器。stylus的配置和测试
stylus是css的一种预处理器,文件类型是 .styl 我们这里对其进行配置
首先在webpack.config.js文件中的rules:[]模块中跟上面一样,加入如下代码,让其可以识别.styl文件
然后在控制台安装stylus所需的loader文件
最后在控制台执行 npm run build 测试结果。
2.5配置webpack-dev-server:专门用在开发环境的打包
因为正式环境和我们的开发环境有所区别,所以需要配置dev用来区分
首先,安装 webpack-dev-server
然后, 修改package.json文件 ,在build下面添加dev配置
然后,修改webpack.config.js
在全局添加target:'web'
因为这个文件要同时用在开发环境和正式环境,所以要加一个环境判断,在跑npm的时候添加变量标识不同环境。
因为在windows和mac环境下的命令会不同,这里安装cross-env 包,使得在不同开发环境下命令相同。
再次修改package.json文件,在“build:”和“dev:"行添加dev命令
cross-env NODE_ENV=development 后面不变
然后,在webpack.config.js文件中进行判断。
首先,配置config.devServer
webpack2之后就可以直接用config.devServer进行配置了。
更改文件头部几行代码
在文件的最后加上如下代码
注意:
host:'0.0.0.0'不要直接写localhost,这样别人的电脑就访问不了了;port不要被占用,不然会打不开
最后.安装html-webpack-plugin插件使得html可以作为入口,自动包含JS
修改webpack.config.js文件
config.js
config.js
至此,dev配置基本完成
控制台执行 npm run dev
打包成功的话就可以在浏览器中查看效果了,
如果出现错误,根据提示修改,注意端口是否占用。我的8000端口占用了,后来用了8080端口就好了
浏览器访问:localhost:8080,可以查看渲染效果。恩,背景图0.jpg是我爱豆23333。笔芯。注意左上角有红色的abc。
浏览器效果
2.6最后还有一些东西要加在config.js中
最后还要加一些东西
1) historyFallback:{}
因为我们做的是单页应用,所以要加一下地址映射到入口index.html,这个先忽略
2) 热加载功能。
hot功能,可以实现局部渲染:比如你改了一个组件的代码,页面只重新渲染这个组件而不是整个页面进行渲染,不需要进行刷新操作。
3) 一些插件
webpack.NoEmitOnErrorsPlugin()去除一些不必要的信息
4) 浏览器调试代码功能的工具
在浏览器中调试的时候,代码不会转码。
最后配置完成后,重新npm run dev一次
npm run dev
成功之后,可以在浏览器中测试热加载效果,修改app.vue文件中的text的内容,就可以看到左上角那个红色的字在变了emmmm
上面是我整理给大家的,希望今后会对大家有帮助。
vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置相关推荐
- vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
- 怎么看vue中某个插件是否安装成功_如何在谷歌中查看VUEX(谷歌浏览器中安装 vue调试工具 vue-devtools)...
本次介绍了两种方法,第一种方法略微复杂,想追求效率的请查看第二种. 20200214141007961.png 如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不能算是一个合格的vue ...
- linux上验证cudnn是否安装成功_非root用户安装cuda与cudnn
很多小伙伴都和我抱怨(其实我自己也是)服务器上管理员已安装好显卡驱动或已安装的CUDA版本无法满足自己要求(要么太高要么太低),与自己需要的TensorFlow或者Pytorch版本不兼容,急的头皮发 ...
- 怎么看python环境变量配置是否好了验证图片_简述验证Anaconda是否安装成功的两种方式和Anaconda环境变量配置过程...
加个"星标",每天一起快乐的学习 今 日 鸡 汤 闻道欲来相问讯,西楼望月几回圆. /1 前言/ 大家好,我是 Rocky0429,今天我给大家介绍一下验证Anaconda是否安装 ...
- 简述验证Anaconda是否安装成功的两种方式和Anaconda环境变量配置过程
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 闻道欲来相问讯,西楼望月几回圆. ...
- ubuntu查看cudnn是否安装成功_深度学习之目标检测系列(0) -ubuntu18.04+RTX2080Ti+cuda+cudnn安装...
ubuntu18.04使用cudnn的过程中会遇见很多问题,而且搜索很多文章发现比较杂乱,我这里总结一下,方便小伙伴少走几步坑. 我的服务器硬件配置信息 (2019-01购买) CPU: 英特尔(in ...
- 如何查看python安装位置图_如何查看pymysql 安装成功
方法/步骤: mysql安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般mysql将会 ...
- 查看git安装目录_一、Linux和Windows下安装Git
centos7中安装Git 简单粗暴版 查看是否安装了git git --version #查看git版本信息 如果提示未找到命令,则表示没有安装 如果安装了git,但是版本过低,则使用该命令移除原来 ...
- 如何检查python的库是否安装成功_如何测试redis是否安装成功
下载Redis 下载好后 复制所在位置 cd 跳到 D:\Java\64bit 图中的目录位置 这样便启动成功了. 设置redis密码的话要 到redis.conf中找到 requirepass关键字 ...
最新文章
- java中字符与字节的编码关系
- debian6更新网卡驱动
- SQL 常用数据类型汇总
- AngularJS的学习笔记(一)
- 一些Setup Factory 教程的链接
- NPOI 将DataGridView导出到Excel
- Aswing入门教程 1.6 颜色和填充
- popupmenu java_Java基于JPopupMenu实现系统托盘的弹出菜单,解决PopupMenu弹出菜单中文乱码...
- 【MySQL】MySQL自带的数据库
- raid硬盘序列号_磁盘阵列出现坏盘,如何正确更换硬盘?
- vue使用ajax库,Vue 中使用Ajax请求
- Mysql 自动增长 重置
- activemq中怎么知道推送消息是否成功_ActiveMQ入门
- 谷粒商城 Day04 sku与spu接口
- 数据库索引:索引并不是万能药
- 135编辑器中html使用方法,135编辑器使用小技巧 135编辑器特色功能使用技巧方法...
- log 的抓取与分析
- Affinity Designer笔记:从图像创建调色板
- 解决PRprocs5安装问题的方法
- 基于java的网上零食销售系统的设计与实现
热门文章
- 如何安装python3.8_Python安装1 —— Python3.8的安装
- 【ElasticSearch】Es 源码之 MonitorService 源码解读
- 95-847-044-源码-Netty-NettyClient创建
- 【Java】finally 语句块不被执行的几种情况
- 【hortonworks/registries】SchemaVersionLifecycleManager.createSchemaVersion null
- 95-140-130-源码-transform-算子coGroup
- linux下postgresql离线编译安装
- 集合类 List 的那些坑
- python考研成绩什么时候出来_这里有最新的调剂、成绩公布时间以及复试信息
- Java 数组中new Object[5]语句是否创建了5个对象?