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. exec 和 spawn 的区别

    参考资料: difference-between-spawn-and-exec-of-node-js-child_process process_child 最近在用nodejs 的child_pro ...

  2. 基于jQuery Ajax实现无刷新文件上传

    最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...

  3. HihoCoder1644 : 完美命名的烦恼（[Offer收割]编程练习赛37）（有向图的一笔画问题||欧拉路）

    描述 程序员常常需要给变量命名.给函数命名.给项目命名.给团队命名…… 好的名字可以大大提高程序员的主观能动性,所以很多程序员在起名时都会陷入纠结和烦恼. 小Hi希望给新的项目起个完美的名字.首先小H ...

  4. 「51Nod1639」绑鞋带（概率

    1639 绑鞋带  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有n根鞋带混在一起,现在重复n次以下操作:随机抽出两个鞋带头,把它们绑在一起.可 ...

  5. 【Lintcode】029.Interleaving String

    题目: Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2 ...

  6. this在方法赋值过程中无法保持（隐式丢失）

    在看<高级程序设计>(我的红宝书) P.183页时遇到下面一个问题 var name = "77"; var obj = { name: "88", ...

  7. [poj2342]Anniversary party树形dp入门

    题意:选出不含直接上下司关系的最大价值. 解题关键:树形dp入门题,注意怎么找出根节点,运用了并查集的思想. 转移方程:dp[i][1]+=dp[j][0];/i是j的子树 dp[i][0]+=max ...

  8. eclipse里的Maven插件安装

    插件安装 打开Eclipse的Help->Install New Software,如下图所示: 2. 选择“Add..”按钮,又会弹出如下对话框: 这个对话框就是用于添加一个插件地址的.在“N ...

  9. ASP.NET MVC (Umbraco)中如何设置网站超时自动退出

    原文章请参考  https://edgewebware.com/2014/06/automatically-log-out-members-send-login-page-umbraco/ 在网站开发 ...

  10. linux 下 .o 文件， .a文件，.so文件的区别

    最近在unbuntu环境下开发代码,由于很少使用linux开发环境,所以对linux编译方面了解更少,关于.o, .a, .so文件和可执行文件一直很困惑 今天特意查了一下关于它们的区分: .o 就相 ...