什么是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. web前端 ajax请求报415/400错

    一.当使用jQuery 的ajax发送请求时 1.请求路劲没有出错并且不存在跨域,出现415错误 解决方法:在ajax请求中加上contentType: 'application/json', $.a ...

  2. LeetCode167.两数之和II-输入有序数组

    给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的下标值 ...

  3. [12]Windows内核情景分析 --- MDI

    Mdl意为'内存映射描述符'.'缓冲描述符',一个mdl就代表一个缓冲.(任意一块物理内存,可以同时映射到用户地址空间和系统地址空间的) 设备IO方式分为三种:缓冲方式.直接IO方式.直接方式 缓冲方 ...

  4. NSThread(II)

    非线程安全 //初始化火车票数量.卖票窗口(非线程安全).并开始卖票 - (void)initTicketStatusNotSave { // 1. 设置剩余火车票为 50 self.ticketSu ...

  5. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...

  6. CSRF（跨站请求伪造）攻击

    CSRF(跨站请求伪造)攻击 CSRF(Cross Site Request Forgery,跨站请求伪造)是一种近年来才逐渐被大众了解的网络攻击方式,又被称为One-Click Attack或Ses ...

  7. Linux基础命令---IP路由操作

    ip ip指令可以显示或操作路由.网路设备,设置路由策略和通道. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora.   1.语法     ...

  8. 转：C# 使用资源文件 Resource.resx 的方法

    在写程序时, 可以把用到的 图标,图片,声音等外部资源,放在一个  .resx (资源文件)中. 这样的好处是不用考虑什么路径的问题.而且还对资源有保护的做用. 1.创建一个 ResourceFile ...

  9. read 命令详解

    read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 语法选项 -p read –p “提示语句”,则屏幕就会输出提示语句,等待输入,并将输入存储在REPLY中 -n ...

  10. CentOS7安装MySQL冲突和问题解决小结

    摘自:https://blog.csdn.net/typa01_kk/article/details/49059729 问题1: [root@localhost install-files]# rpm ...