什么是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. Javascript-for循环案例-打印1-100之间所有的数字

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. WinPE引导硬盘安装64位的Windows_Server_2008系统

    用 U盘WinPE引导实现硬盘安装Windows Server 2008 R2系统的方法如果想不用光盘(光盘和光驱总是靠不住的),只用U盘或移动硬盘上的WinPE引导,在电脑硬盘安装一个64位的Win ...

  3. java virtual machine launcher Error：Could not create the Java Virtual Machine. Error:A Fatal exception has occurred,Program will exit.

    Error:Could not create the Java Virtual Machine. Error:A Fatal exception has occurred,Program will e ...

  4. 阿里云ECS服务器 常见问题（1）

    无法在外网访问服务器的公网ip 解决方法: 在阿里云 云服务器ECS-安全组规则 添加端口 可更根据阿里的教程来 配置完成后即可访问!

  5. 仿豆瓣网（电脑版网页）HTML+CSS实现

    步骤一:将豆瓣电脑版网页以图片形式保存下来: 利用了chrome里面的插件: 步骤二:将图片放置到PS中,研究布局: 我将其分为header部分,banner部分,section部分,footer部分 ...

  6. codeforces 980C Posterized

    题意: 255个像素格子,可以把这个255个分组,每组的大小不能超过k. 给出n个像素,要求每个像素用这组的key代表,并且表示出来的字典序要最小. 思路: 感谢js教本智障. 很自然的会想到贪心,也 ...

  7. 关于在搜索栏的一些小bug

    问题:我们在使用input标签和button按钮写搜索框的时候,书写在两行的时候会有缝隙,其次,input标签如果用大的div括起来,里面依然会显示边框. 解决方法:1.关于input标签,我们将属性 ...

  8. modelform的简介

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  9. mybatis源码解析6---MappedStatement解析

    MappedStatement类位于mybatis包的org.apache.ibatis.mapping目录下,是一个final类型也就是说实例化之后就不允许改变 MappedStatement对象对 ...

  10. python迭代器以及生成器

    迭代器iter():节省内存 Iter()迭代器 每一次输出下一个值 >>> a=iter(range(10)) >>> a.next() 0 >>&g ...