博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue学习【第四篇】:Vue 之webpack打包工具的使用
阅读量:4687 次
发布时间:2019-06-09

本文共 757 字,大约阅读时间需要 2 分钟。

什么是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.jswebpack 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的文件,现在就可以使用并导入了

    
Title
this is div test

 

转载于:https://www.cnblogs.com/596014054-yangdongsheng/p/10228441.html

你可能感兴趣的文章
使用ASP.Net WebAPI构建REST服务(六)——Self-Host
查看>>
asp.net 的三种开发模式
查看>>
Android 交叉编译 IPerf3
查看>>
Android原生Gallery关于图像Orientation的问题
查看>>
Android开发之ViewPager
查看>>
【NOIP2017】列队【可持久化线段树】
查看>>
python学习——通过while循环语句实现九九乘法表的四种表达方式
查看>>
[解题报告] 100 - The 3n + 1 problem
查看>>
MvvmCross[翻译] 使用Xamarin与MvvmCross完成一个跨平台App
查看>>
Entity Framework 学习高级篇1—改善EF代码的方法(上)
查看>>
027-chown命令
查看>>
Python 线程、进程和协程
查看>>
赛普系统自动拨号
查看>>
platform_device与platform_driver
查看>>
[iOS] iPad与iPhone上各种标准控件的大小
查看>>
动态规划(游船费用问题)
查看>>
[原创]Windows利用BitNami搭建Redmine
查看>>
Mybatis逆向工程配置文件详细介绍(转)
查看>>
Linux命令学习一日一命令(RM)
查看>>
5-1
查看>>