vue.js及项目实战[笔记]— 05 WebPack
一. 历史介绍
1. 规范
- AMD
- Commonjs||CMD
- UMD
2. 工具
- npm
- bower
- webpack
- browserify
参考:
bower 和 npm 的区别详细介绍
npm、cnpm、bower安装区别
gulp/grunt和browserify/webpack的区别
二. webpack打包模块源码
- 1. 把所有模块的代码放入到函数中,用一个数组保存起来
- 2. 根据require时传入的数组索引,能知道需要那一段代码
- 3. 从数组中,根据索引取出包含我们代码的函数
- 4. 执行该函数,传入一个对象
module.exports = 'xxx'
- 5. 我们的代码,按照约定,正好是用
module.exports = 'xxx'
进行赋值 - 6. 调用函数结束后,
module.exports
从原来的空对象,就有了值 - 7. 最终
return module.exports
作为require函数的返回值
三. webpack.config.js文件配置
entry
是一个对象,程序的入口key
: 随意写value
: 入口文件
output
是一个对象,产出的资源key
: filenamevalue
: 生成的build.js
module
模块(对象)loaders
: []- 存在一些
loader
|{test:正则,loader:'style-loader!css-loader'}
- 存在一些
四. 处理less
loader:'style-loader!css-loader!less-loader'
五. 处理ES6
babel-loader
+babel-preset-env
(es2015/2016/2017)
六. 处理文件+base64
url-loader
可以将文件生成为base64编码到build.js中- 文件在base64加密后会比原来大三分之一
- 应用场景是比较小的图片,4kb以内的图片
七. 字符串内使用内置变量
- name:
[name].[ext]
- name是获取原文件名,ext是获取原文件名的后缀
output:{path:'绝对路径',设置产出的资源目录,filename:'build.js'}
八. 处理html
html-webpack-plugin
- 1.下载
- 2.在
webpack.config.js
文件中引入 - 3.
plugins
属性,配置该对象 - 4.给其
options
设置template
(参照物)
九. 单文件方式
- 依赖
vue-loader
vue-template-compiler
十. webpack-dev-server
--open
自动打开浏览器--hot
热替换,不在刷新的情况下替换,css样式--inline
自动刷新--port 9999
制定端口--process
显示编译进度
四. 包的分类管理和分类恢复
- 1. 安装包的时候,做一个分类管理
- 开发依赖(打包相关webpack)
npm i 包名 -D
->devDependencies - 生产依赖(不包含webpack打包依赖)
npm i 包名 -D
-> dependencies
- 开发依赖(打包相关webpack)
- 2. 恢复依赖
- 如果包文件不小心删了/少了
- 开发恢复
npm i
- 生产恢复
npm i --production
vue.js及项目实战[笔记]— 05 WebPack的更多相关文章
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- vue.js及项目实战[笔记]— 01 vue.js
一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...
- vue.js及项目实战[笔记]— 02 vue.js基础
一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...
- vue.js及项目实战[笔记]— 04 axios
一. axios 1. 基本使用 axios.method('url',[,...data],options) .then(function(res){ }) .catch(function(err) ...
- vue.js的项目实战
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用, ...
- vue.js+koa2项目实战(一)创建项目和elementUI配置
前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...
- vue.js学习与实战笔记(1)
公司需要开发一个小型官网,个人决定放弃angular2,使用vue来进行开发,由于是培训出生,思想一时难以转变,所以只能从零开始,下面奉上学习笔记 vue.js主要参考官网进行学习与开发 由于vue不 ...
- vue.js+koa2项目实战(三)登录注册模态框
登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
随机推荐
- JSON 字符串解析技巧总结
在解析JSONObject的字符数据的时候,可以考虑去使用optString 解析网络JSON数据时,获取数据的两个方法optString和getString: 使用optString获取数据时,即使 ...
- 详解Android数据存储技术
前言 学习Android相关知识,数据存储是其中的重点之一,如果不了解数据,那么让你跟一款没有数据的应用玩,你能玩多久呢?答案是这和没有手机几乎是差不多的.我们聊QQ,聊微信,看新闻,刷朋友圈等都是看 ...
- 机器学习基石笔记:10 Logistic Regression
线性分类中的是非题------>概率题, 设置概率阈值后,大于等于该值的为O,小于改值的为X.------>逻辑回归. O为1,X为0: 逻辑回归假设: 逻辑函数/S型函数:光滑,单调, ...
- 和嗲妹妹面试python,是种什么体验?
这次给大家讲讲我2年前去爱奇艺面试高级运维开发岗位的经历,希望对大家带来一些帮助. 公众号「Python专栏」后台回复:自动化运维平台,获取整套自动化运维平台的源代码 聊骚阶段 嗲妹妹:你好,我是爱奇 ...
- Alienware 15 R3 装Ubuntu 和 win10 双系统
一.安装环境 Alienware 15 R3 win10 专业版64位 ubuntu16.04 二.软件下载 1.Ubuntu16.04 下载地址:https://www.ubuntu.com/dow ...
- 21天打造分布式爬虫-urllib库(一)
1.1.urlopen函数的用法 #encoding:utf-8 from urllib import request res = request.urlopen("https://www. ...
- .NetCore使用skywalking实现实时性能监控
一.简介 很久之前写了一篇 <.Net Core 2.0+ InfluxDB+Grafana+App Metrics 实现跨平台的实时性能监控>关于NetCore性能监控的文章,使用Inf ...
- [java初探外篇]__关于StringBuilder类与String类的区别
前言 我们前面学习到String类的相关知识,知道了它是一个字符串类,并且了解到其中的一些方法,但是当时并没有太过注意到String类的特点,今天就StringBuilder类的学习来比较一下两者的区 ...
- Dockerfile文件制作自己的镜像
1.创建空目录 $ cd /home/xm6f/dev $ mkdir myapp $ cd myapp/ 2.vim Dockerfile,内容如下: ## 一个基础的 python 运行环境 FR ...
- GAN笔记——理论与实现
GAN这一概念是由Ian Goodfellow于2014年提出,并迅速成为了非常火热的研究话题,GAN的变种更是有上千种,深度学习先驱之一的Yann LeCun就曾说,"GAN及其变种是数十 ...