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 学习笔记二 字符串拼接
Mar 28 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
初步了解javascript面向对象
Nov 09 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
详解node.js 事件循环
Jul 22 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新手上路(十)
2006/10/09 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python 文件重命名工具代码
2009/07/26 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
深入理解python中的atexit模块
2017/03/07 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
MySql数据库触发器使用教程
2022/06/01 MySQL