一. 历史介绍

1. 规范

  • AMD
  • Commonjs||CMD
  • UMD

参考:
认识AMD、CMD、UMD、CommonJS

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: filename
    • value: 生成的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
  • 2. 恢复依赖
    • 如果包文件不小心删了/少了
    • 开发恢复 npm i
    • 生产恢复 npm i --production

vue.js及项目实战[笔记]— 05 WebPack的更多相关文章

  1. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  2. vue.js及项目实战[笔记]— 01 vue.js

    一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...

  3. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  4. vue.js及项目实战[笔记]— 04 axios

    一. axios 1. 基本使用 axios.method('url',[,...data],options) .then(function(res){ }) .catch(function(err) ...

  5. vue.js的项目实战

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用, ...

  6. vue.js+koa2项目实战(一)创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

  7. vue.js学习与实战笔记(1)

    公司需要开发一个小型官网,个人决定放弃angular2,使用vue来进行开发,由于是培训出生,思想一时难以转变,所以只能从零开始,下面奉上学习笔记 vue.js主要参考官网进行学习与开发 由于vue不 ...

  8. vue.js+koa2项目实战(三)登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

  9. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

随机推荐

  1. JSON 字符串解析技巧总结

    在解析JSONObject的字符数据的时候,可以考虑去使用optString 解析网络JSON数据时,获取数据的两个方法optString和getString: 使用optString获取数据时,即使 ...

  2. 详解Android数据存储技术

    前言 学习Android相关知识,数据存储是其中的重点之一,如果不了解数据,那么让你跟一款没有数据的应用玩,你能玩多久呢?答案是这和没有手机几乎是差不多的.我们聊QQ,聊微信,看新闻,刷朋友圈等都是看 ...

  3. 机器学习基石笔记:10 Logistic Regression

    线性分类中的是非题------>概率题, 设置概率阈值后,大于等于该值的为O,小于改值的为X.------>逻辑回归. O为1,X为0: 逻辑回归假设: 逻辑函数/S型函数:光滑,单调, ...

  4. 和嗲妹妹面试python,是种什么体验?

    这次给大家讲讲我2年前去爱奇艺面试高级运维开发岗位的经历,希望对大家带来一些帮助. 公众号「Python专栏」后台回复:自动化运维平台,获取整套自动化运维平台的源代码 聊骚阶段 嗲妹妹:你好,我是爱奇 ...

  5. Alienware 15 R3 装Ubuntu 和 win10 双系统

    一.安装环境 Alienware 15 R3 win10 专业版64位 ubuntu16.04 二.软件下载 1.Ubuntu16.04 下载地址:https://www.ubuntu.com/dow ...

  6. 21天打造分布式爬虫-urllib库(一)

    1.1.urlopen函数的用法 #encoding:utf-8 from urllib import request res = request.urlopen("https://www. ...

  7. .NetCore使用skywalking实现实时性能监控

    一.简介 很久之前写了一篇 <.Net Core 2.0+ InfluxDB+Grafana+App Metrics 实现跨平台的实时性能监控>关于NetCore性能监控的文章,使用Inf ...

  8. [java初探外篇]__关于StringBuilder类与String类的区别

    前言 我们前面学习到String类的相关知识,知道了它是一个字符串类,并且了解到其中的一些方法,但是当时并没有太过注意到String类的特点,今天就StringBuilder类的学习来比较一下两者的区 ...

  9. Dockerfile文件制作自己的镜像

    1.创建空目录 $ cd /home/xm6f/dev $ mkdir myapp $ cd myapp/ 2.vim Dockerfile,内容如下: ## 一个基础的 python 运行环境 FR ...

  10. GAN笔记——理论与实现

    GAN这一概念是由Ian Goodfellow于2014年提出,并迅速成为了非常火热的研究话题,GAN的变种更是有上千种,深度学习先驱之一的Yann LeCun就曾说,"GAN及其变种是数十 ...