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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
详解原生JS回到顶部
Mar 25 Javascript
了解javascript中的Dom操作
May 27 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
php 网上商城促销设计实例代码
2012/02/17 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
校企合作协议书
2014/04/16 职场文书
销售类求职信
2014/06/13 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
户外拓展训练感想
2015/08/07 职场文书