Vue+webpack项目基础配置教程


Posted in Javascript onFebruary 12, 2018

最近在学习webpack,跟着课程一个单页面应用,在这里记录一下。这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置。

记录比较粗略,后续会更新。

1.开发环境:vscode,node.js,vue.js,webpack

大家自己安装一下node.js可以参考菜鸟教程

使用的IDE是 VScode

2.项目初始化

快捷键ctrl+` 打开vscode控制台

Vue+webpack项目基础配置教程 

vscode界面

2.1安装webpack vue vue-loader

npm init
npm i webpack vue vue-loader

npm 出现warn提醒你需要依赖,按照提示进行安装

Vue+webpack项目基础配置教程 

warn

安装相应的loader

npm i css-loader vue-template-compiler

2.2配置webpack可以加载app.vue文件

首先创建src文件夹,并在其下创建app.vue最为主代码文件,index.js作为入口文件。

Vue+webpack项目基础配置教程 

基础文件

app.vue文件内容如下:

<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc'
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

在src同级目录下

创建webpack.config.js文件,配置入口entry,输出output

Vue+webpack项目基础配置教程 

创建package.json文件和webpack.config.js文件

//webpack.config.js
const path = require('path')
module.exports = {
 entry: path.join(__dirname,'src/index.js'), //调用Index.js作为入口文件
 output: { //打包完的js文件会在bundle.js中,这个文件待会会自动生成的
 filename: 'bundle.js', 
 path: path.join(__dirname,'dist') //用来存放bundle.js文件的地址,自己定义
 },
 module: {
 rules: [{
  test: /.vue$/,
  loader: 'vue-loader'
 }]
 }
}

index.js文件作为入口

//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

配置package.json文件中的scripts命令,添加build

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack --config webpack.config.js"
 },

在控制台输入npm run build 命令进行打包,打包成功后如图

Vue+webpack项目基础配置教程 

webpack打包完成后

2.3配置webpack可以加载非Js文件

webpack.config.js文件具体配置

在webpack.config.js中的module: {}模块中添加rules:[],可以设置webpack需要识别的文件类型,之前已经设置了vue文件类型,好需要添加css/图片。

//webpack.config.js 
module: {
 rules: [
 {
 test: /.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /.css$/,
 use:[
 'style-loader',
 'css-loader'
 ]
 },
 {
 test: /\.(gif|jpg|png|svg)$/,
 use: [{
  loader: 'url-loader',
  options: {
  limit: 1024,
  name:'[name].[ext]'
  }
 }]
 }
] 
}

在控制台执行命令,安装相应的loader

npm i style-loader css-loader url-loader file-loader

测试非js类型文件打包效果

目标:在js代码中import这些非js类型的文件中的内容

再src子目录下,创建测试文件test.css。以及在images中放入jpg图片代用(一张就可以了,emmm我当时放多了就先不删了)

Vue+webpack项目基础配置教程 

src下文件结构

在Index.js中import这些非js文件。

//index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css' //import css文件
import './assets/images/0.jpg' //import 图片
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

最后在控制台执行 npm run build 测试结果。

打包成功图片类似上面。

2.4关于css预处理器。stylus的配置和测试

stylus是css的一种预处理器,文件类型是 .styl 我们这里对其进行配置

首先在webpack.config.js文件中的rules:[]模块中跟上面一样,加入如下代码,让其可以识别.styl文件

//webpack.config.js
  {
  test:/.styl$/,
  use: [
   'style-loader',
   'css-loader',
   'stylus-loader'
  ]
  }

然后在控制台安装stylus所需的loader文件

npm i style-loader stylus-loader

最后在控制台执行 npm run build 测试结果。

2.5配置webpack-dev-server:专门用在开发环境的打包

因为正式环境和我们的开发环境有所区别,所以需要配置dev用来区分

首先,安装 webpack-dev-server

npm i webpack-dev-server

然后, 修改package.json文件 ,在build下面添加dev配置

Vue+webpack项目基础配置教程 

package.json文件配置

然后,修改webpack.config.js

在全局添加target:'web'

Vue+webpack项目基础配置教程 

config.js

因为这个文件要同时用在开发环境和正式环境,所以要加一个环境判断,在跑npm的时候添加变量标识不同环境。

因为在windows和mac环境下的命令会不同,这里安装cross-env 包,使得在不同开发环境下命令相同。

npm i cross-env

再次修改package.json文件,在“build:”和“dev:"行添加dev命令

cross-env NODE_ENV=development  后面不变

Vue+webpack项目基础配置教程 

package.json文件build

然后,在webpack.config.js文件中进行判断。

首先,配置config.devServer

webpack2之后就可以直接用config.devServer进行配置了。

更改文件头部几行代码

Vue+webpack项目基础配置教程 

在文件的最后加上如下代码

Vue+webpack项目基础配置教程 

config.devServer

注意:
host:'0.0.0.0'不要直接写localhost,这样别人的电脑就访问不了了;port不要被占用,不然会打不开

最后.安装html-webpack-plugin插件使得html可以作为入口,自动包含JS

npm i html-webpack-plugin

修改webpack.config.js文件

Vue+webpack项目基础配置教程 

config.js

Vue+webpack项目基础配置教程 

config.js

至此,dev配置基本完成

控制台执行 npm run dev

npm run dev

打包成功的话就可以在浏览器中查看效果了,

如果出现错误,根据提示修改,注意端口是否占用。我的8000端口占用了,后来用了8080端口就好了

浏览器访问:localhost:8080,可以查看渲染效果。恩,背景图0.jpg是我爱豆23333。笔芯。注意左上角有红色的abc。

Vue+webpack项目基础配置教程 

浏览器效果

2.6最后还有一些东西要加在config.js中

最后还要加一些东西

1) historyFallback:{}

因为我们做的是单页应用,所以要加一下地址映射到入口index.html,这个先忽略

2) 热加载功能。

hot功能,可以实现局部渲染:比如你改了一个组件的代码,页面只重新渲染这个组件而不是整个页面进行渲染,不需要进行刷新操作。

3) 一些插件

webpack.HotModuleReplacementPlugin()启动hot功能

webpack.NoEmitOnErrorsPlugin()去除一些不必要的信息

4) 浏览器调试代码功能的工具

在浏览器中调试的时候,代码不会转码。

config.devtool = “#cheap-module-evel-source-map”

Vue+webpack项目基础配置教程 

最后配置完成后,重新npm run dev一次

npm run dev

成功之后,可以在浏览器中测试热加载效果,修改app.vue文件中的text的内容,就可以看到左上角那个红色的字在变了emmmm

//app.vue
<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc' //打开浏览器,然后直接改这里就可以实时看到文字变化效果了。
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

总结

以上所述是小编给大家介绍的Vue+webpack项目基础配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 #Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
原生js实现省市区三级联动代码分享
Feb 12 #Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 #Javascript
代码详解JS操作剪贴板
Feb 11 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
python 容器总结整理
2017/04/04 Python
pandas值替换方法
2018/07/10 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
公务员政审材料
2014/12/23 职场文书
正规欠条模板
2015/07/03 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server