vue之webpack打包工具的使用

一、什么是webpack?

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

二、webpack的功能？

　　1、它可以把CSS，JS图片当做模块来处理

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

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

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

三、安装

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之webpack打包工具的使用的更多相关文章

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

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

  2. Vue学习【第四篇】：Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  3. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  4. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  5. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  6. # webpack 打包工具（vue）

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  7. Webpack打包工具学习使用

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...

  8. vue的webpack打包

    一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...

  9. vue结合webpack打包问题

    在使用vue开发项目时,如果要使用其单文件组件特性,必然要使用webpack或者其他打包工具打包,这里我用到的是webpack打包,首先是搭建vue环境和webpack环境,在这里遇到的一个问题是在成 ...

随机推荐

  1. python根据圆的参数方程求圆上任意一点的坐标

    from math import cos, sin,pi x0,y0=0,0 r=4.0 angle=-25 x1 = x0 + r * cos(angle * pi / 180) y1 = y0 + ...

  2. Python 使用正则表达式验证密码必须包含大小写字母和数字

    校验密码是否合法的程序. 输入一个密码 1.长度5-10位 2.密码里面必须包含,大写字母.小写字母和数字 3.最多输入5次 ===================================== ...

  3. T58

    他们投产的新轿车广获传媒报道.The launch of their new saloon received much media coverage.法律规定禁止近亲结婚.Marriages in p ...

  4. win7 jenkins 修改主目录

    1.安装tomcat 2.下载Jenkins.war包,把Jenkins.war放在D:\01Install\tomcat\webapps目录下,启动tomcat

  5. python 生成特定间隔数列的方法

    (1)range() 和 xrange( )[python内置函数] range(开始,结束,间隔). 值得注意的是:生成数列最后一个数< 结束值. 返回结果类型:list,其中元素是integ ...

  6. P2764 [网络流24题]最小路径覆盖问题[最大流]

    地址 这题有个转化,求最少的链覆盖→即求最少联通块. 设联通块个数$x$个,选的边数$y$,点数$n$个 那么有 $y=n-x$   即  $x=n-y$ 而n是不变的,目标就是在保证每个点入度.出度 ...

  7. python爬虫知识点总结（六）BeautifulSoup库详解

    官方学习文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 一.什么时BeautifulSoup? 答:灵活又方便的网页解析库,处 ...

  8. bzoj 1004 Cards & poj 2409 Let it Bead —— 置换群

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1004 关于置换群:https://www.cnblogs.com/nietzsche-oie ...

  9. Android HAL层与Linux Kernel层驱动开发简介

    近日稍微对Android中的驱动开发做了一些简要的了解. HAL:Hardware Abstract Layer 硬件抽象层,由于Linux Kernel需要遵循GPL开源协议,硬件厂商为了保护自己硬 ...

  10. SeetaFace教程（一） 在 VS 中的编译安装和环境配置

    SeetaFace开源库由FaceDetection.FaceAlignment.FaceIdentification三部分组成.FaceDetection是在一副图片中检测出人脸区域,以一个方形区域 ...