一、什么是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打包工具的使用

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

  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. 出题人的手环(牛客练习赛38D 离散化+树状数组)

    题目链接(https://ac.nowcoder.com/acm/contest/358/D) 题目描述 出题人的妹子送了出题人一个手环,这个手环上有 n 个珠子,每个珠子上有一个数. 有一天,出题人 ...

  2. Mybatis--课程中循序渐进的体会 《黑马程序员_Springmvc+Mybatis由浅入深全套视频教程video》

    mybatis 刚开始是用最原始的方法开发了一个入门程序,(没有dao) 1.将数据源配置在SqlMapConfig.xml 2.写一个po类 和映射文件User.xml(中的namespace=“名 ...

  3. python selenium+phantomJS自动化测试环境

    0x00配置phantomJS 1. 在windows平台下 此种方法是弹浏览器进行自动化测试的. 1.下载谷歌的驱动 https://chromedriver.storage.googleapis. ...

  4. scrapy基础 之 爬虫入门：先用urllib2来跑几个爬虫

    1,爬取糗事百科 概况:糗事百科是html网页,支持直接抓取html字符然后用正则过滤 爬取糗事百科需要同时发送代理信息,即user-agent import urllib2,re def pacho ...

  5. java高级 - java利用listener实现回调，即观察者模式

    https://blog.csdn.net/lin_sir6/article/details/70052954

  6. PTA L1题目合集（更新至2019.3）

    L1-001 Hello World (5 分) 链接:https://pintia.cn/problem-sets/994805046380707840/problems/9948051471320 ...

  7. [转]python3之paramiko模块（基于ssh连接进行远程登录服务器执行命令和上传下载文件的功能）

    转自:https://www.cnblogs.com/zhangxinqi/p/8372774.html 阅读目录 1.paramiko模块介绍 2.paramiko的使用方法 回到顶部 1.para ...

  8. python中模块的__all__属性

    python模块中的__all__属性,可用于模块导入时限制,如:from module import *此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入. ...

  9. Shell-find . -type f -name "*.log" -print0 | xargs -0 rm -f

    用 rm 删除太多的文件时候,可能得到一个错误信息:/bin/rm Argument list too long.

  10. python zip文件压缩和解压

    压缩 import shutil zipOutputName = "1234" # 输出1234.zip fileType = "zip" # 文件类型zip ...