什么是webpack

webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。

webpack的功能

它可以吧CSS，JS图片当做模块来处理

它可以吧以上的这些文件进行打包压缩成一个JS文件，减少了HTTP的请求

根据模块之间的依赖关系进行分析，按需加载

可以安装一些插件，对插件进行打包处理

安装

npm install webpack -g(全局的安装)
webpack -v #查看是否安装成功

打包的方式：

手动打包：

a.js

webpack a.js /test/a2.js

自动打包

简单使用

这里我们来理解下webpack是如何打包的

app/a.js

var tcl = "this is webpack test";

console.log(tcl);
require('style-loader!css-loader!./a.css');

执行命令

webpack app/a.js public/b.js    、//意思是吧app下的a.js打包在public下的b.js

就会自动生成一个b.js的文件，现在就可以使用并导入了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        this is div test

    </div>

    <script src="bundle.js"></script>

</body>

</html>

Vue学习【第四篇】：Vue 之webpack打包工具的使用的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  3. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  4. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  5. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  6. Vue学习系列(四)——理解生命周期和钩子

    前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...

  7. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  8. Vue学习【第一篇】：Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  9. vue学习【四】vuex快速入门

    大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...

随机推荐

  1. redis的key越来越多,对速度是否有影响

    ---恢复内容开始--- redis存储key是用字典对象的,查询性能几乎和数量级无关,只要保证内存够用就可以了,如果内存不够,会把内存和swap空间交换,这种情况下就会很影响性能,会读取出现读取磁盘 ...

  2. springboot整合webSocket的使用

    引入jar包 <dependency><!-- 5.引入websocket--> <groupId>org.springframework.boot</gro ...

  3. 多线程：Operation(二)

    1. Operation 设置依赖关系 先看看如何设置operation的依赖关系. 啥叫依赖关系?有啥用啊?打个比方咱们要做一个听音乐的付费App项目,需要经过登陆.付费.下载.播放四个步骤.其实一 ...

  4. CS131&Cousera图像处理学习笔记 - L5边缘

    cs131: http://vision.stanford.edu/teaching/cs131_fall1617/ coursera: https://www.coursera.org/learn/ ...

  5. xlrd、xlwt

    一个公司内,销售或者人事都是使用excel来记录员工的信息,所以介绍可操作excel文件的xlrd.xlwt模块. 其中xlrd模块实现对excel文件内容读取,xlwt模块实现对excel文件的写入 ...

  6. ResourceBundle与Properties读取配置文件

    ResourceBundle与Properties的区别在于ResourceBundle通常是用于国际化的属性配置文件读取,Properties则是一般的属性配置文件读取. ResourceBundl ...

  7. c# 继承与多种状态

    可访问性: public                      无限制 internal                   只允许在同一个程序集访问 protected              ...

  8. 转：控制ComboBox下拉框的下拉部分宽度，使内容能够显示完全

    一般的情况下,如果下拉框的选项的文字太长,下拉框ComboBox的Width宽度属性我们又不想要改变(默认不变),下拉选项的文字内容就会被截剪,如下图所示: 解决办法: 1.自动判断下拉选项的文字长度 ...

  9. maven 项目打可执行jar包

    昨晚,突然就来了紧急任务. 验签较慢,着手优化,发来一个demo.     首先需要把该demo部署在Linux上.     该项目是maven 项目,所以用maven打个jar包,打完jar包之后, ...

  10. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...