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 相关文章推荐
在javascript中对于DOM的加强
Apr 11 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
javascript简易画板开发
Apr 12 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python下载指定页面上图片的方法
2016/05/12 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python实现邮件循环自动发件功能
2020/09/11 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
毕业生实习鉴定
2013/12/11 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
工厂车间标语
2014/06/19 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
玄武湖导游词
2015/02/05 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP