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. 常见的25个python面试问答

    常见的25个python面试问答 说到好用简洁的大数据技术,除了Hadoop.R等等,Python也是其中熠熠生辉的一员,因而广受企业和商家的青睐.求职季,不少应聘者在面试相关职业时都被要求掌握Pyt ...

  2. 总结近期CNN模型的发展(一)---- ResNet [1, 2] Wide ResNet [3] ResNeXt [4] DenseNet [5] DPNet [9] NASNet [10] SENet [11] Capsules [12]

    总结近期CNN模型的发展(一) from:https://zhuanlan.zhihu.com/p/30746099 余俊 计算机视觉及深度学习   1.前言 好久没有更新专栏了,最近因为项目的原因接 ...

  3. L83

    Kids Gulp 7 Trillion Calories Per Year Kids from the ages of 2 to 19, consume about seven trillion c ...

  4. VC++动态链接库(DLL)编程深入浅出：Q&A（原创）

    Q1:extern “C” 是做什么用的? A1:一种情况是多个文件中,变量声明或者函数声明,需要extern “C”,这种情况在这里不做讨论. 在dll工程中,被extern "C&quo ...

  5. hdu-5806 NanoApe Loves Sequence Ⅱ(尺取法)

    题目链接: NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 262144/13107 ...

  6. FAQrobot 聊天机器人笔记

    follow: https://github.com/ofooo/FAQrobot  这是一个简单的基于问词匹配的自动问答,获取与用户问句Q1最匹配的知识库中的问句Q2,Q2的答案就是Q1的答案. 首 ...

  7. Unix环境编程之文件IO

    1.文件IO 2.文件与目录 3.进程 4.多线程编程 5.信号 6.进程间通信 学习linux编程,首先要学会使用shell,这里一些基础命令就不介绍了.这里唯一要提的一个shell命令就是man. ...

  8. POJ2887(块状链表)

    Big String Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 6346   Accepted: 1525 Descr ...

  9. Nuget：RQCode

    ylbtech-Nuget:QRCode 1.返回顶部 1. https://www.nuget.org/packages?q=qrcode 2. 2.qrcode.js返回顶部 1. https:/ ...

  10. ContOS 小细节

    rm [filename] 这个filenam 中间如果有()那么就必须用/转义,如 demo_(2).txt 必须写为 demo_\(2\).txt 上传 rz下载 sz + 文件名退出 exit解 ...