1 .mac进入某个目录快捷键
shift+command+G 输入文件夹路径，进入指定文件夹
在这里隐藏文件所在的目录按键盘上面的shift+cmmand+.
2 .webstorm激活
https://www.jianshu.com/p/133af2e4fe3f
3. 安装vue-cli脚手架
https://www.cnblogs.com/liaoanran/p/8042893.html
cmd打开自己的项目工作空间，然后敲入命令：
vue init webpack test（其中test为我的项目名称）
然后终端会出现下图“一问一答”模式，如图：
“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置
ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦
“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”
这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader
4. vue安装环境搭建
https://www.jianshu.com/p/2273e26ff6e8
问题：
1 . Hash模式 去掉# 避免bug
使用history，页面出现空白怎么解决: 需要后台配置的支持
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
2. Keep-alive 的时候逻辑处理
要求：前进刷新，后退不刷新
https://www.cnblogs.com/growupup/p/10001623.html 待研究
3. 微信分享，微信支付 ,地图，使用4g时候获取地图
4. vuex简写处理 …map
import { mapState } from 'vuex'
…mapState
5. vue图片懒加载
安装vue-lazyload —save-dev
https://blog.csdn.net/tianpeng1996/article/details/82780367
还需要看视频验证一下
// ————————————————————————————————————————————————
6. ES6
https://www.runoob.com/w3cnote/es6-setup.html
Es6环境的搭建
针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等。
2.1 let const var
let 只能声明一次 var 可以声明多次:
let a = 1;
let a = 2;
var b = 3;
var b = 4;
a // Identifier 'a' has already been declared
b // 4
let 不存在变量提升，var 会变量提升，所以let 是在代码块内有效，var 是在全局范围内有效:
console.log(a); //ReferenceError: a is not defined
let a = "apple";
console.log(b); //undefined
var b = "banana";
ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。
var PI = "a";
Const 需要声明出变了
if(true){
console.log(PI); // ReferenceError: PI is not defined
const PI = "3.1415926";
}
2.2 es6解构赋值
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
3.字符串遍历 http://es6.ruanyifeng.com/#docs/string 阮一峰
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
2.3 Symbol
独一无二的值
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。
Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象
let sy = Symbol("KK");
console.log(sy); // Symbol(KK)
typeof(sy); // "symbol"
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk");
sy === sy1; // false
作为属性名
let sy = Symbol("key1");
let syObject = {
[sy]: "kk"
};
console.log(syObject); // {Symbol(key1): "kk"}
Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。
let syObject = {};
syObject[sy] = "kk";
syObject[sy]; // "kk"
syObject.sy; // undefined 取得是字符串 sy
3.1.1 ES6 Map 与 Set
(问题，取map对象第2个值，取set对象第3个值 ？？？)
3.1.1 map set
Map 对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Maps 和 Objects 的区别
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
Map 中的 key
key 是字符串
var myMap = new Map();
var keyString = "a string";
myMap.set(keyString, "和键'a string'关联的值");
myMap.get(keyString); // "和键'a string'关联的值"
myMap.get("a string"); // "和键'a string'关联的值"
// 因为 keyString === 'a string'
key 是对象
var myMap = new Map();
var keyObj = {},
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {} ？？？ 不全等于
keyObj = {} 此空对象和myMap.get({}) 括号里的空对象 不是一个空对象，因为不是同一个地址
就像
Var c = {} var d ={ } ; c !== d 同时 c！= d
key 是函数
var myMap = new Map();
var keyFunc = function () {}, // 函数
myMap.set(keyObj, "和键 keyFunc 关联的值");
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}
key 是 NaN
var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，NaN作为Map的键来说是没有区别的。
Map 的迭代
对 Map 进行遍历，以下两个最高级。
for...of
Map 可以遍历循环key value ，也可以分别遍历
myMap.entries()
myMap.keys()
myMap.values() 三者均返回新对象
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */
forEach()
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
同 for … of …
/ 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
Map 对象的操作
Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
console.log(original === clone);
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。
map与array转换 互相转换 new map 与 Array.from
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);
Map 的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);
Set 对象
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}. set(2)代表长度为2 ，里面值为{1,5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性.
// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
set转array
arry.from
于是，现在我们可以用一行代码实现数组去重了：
let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
差集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
3.1.2 reflect proxy
3.2.1 字符串
includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
let string = "apple,banana,orange";
string.includes("banana"); // true
string.startsWith("apple"); // true
string.endsWith("apple"); // false
string.startsWith("banana",6) // true 第6个位置
如果想知道字符串在什么位置 ？？？ 怎么做？？ Indexof
字符串补全
padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从头部补全原字符串。
以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。
console.log("h".padStart(5,"o")); // "ooooh"
console.log("h".padEnd(5,"o")); // "hoooo"
console.log("h".padStart(5)); // " h"
常用于补全位数：
console.log("123".padStart(10,"0")); // "0000000123"
3.2.3 对象
ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。
const age = 12;
const name = "Amy";
const person = {age, name}; //等同于 const person = {age: age, name: name}
person //{age: 12, name: "Amy"}
方法名也可以简写
const person = {
sayHi(){
console.log("Hi");
}
}
person.sayHi(); //"Hi"
//等同于
const person = {
sayHi:function(){
console.log("Hi");
}
}
person.sayHi();//"Hi"
4.1 函数
function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",18); // Amy,18
fn("Amy",""); // Amy,
fn("Amy"); // Amy,17
只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。
function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",null); // Amy,null
箭头函数
1.一个参数, 当只有一行语句，并且需要返回结果时，可以省略 {} ,
var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1
2.没有参数或者有多个参数，要用 () 括起来。
var f = (a,b) => a+b;
f(6,2); //8
3.多行语句，用 {} 包裹起来，表示代码块，
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
4.返回对象
当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
// 报错
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
或者
var f = (id,name) => {return {id: id, name: name}}; 个人认为，没有尝试
// ————————————————————————————————————————————————
7. node.js
8. Vue3.0
9.webpack
css
1.css：hover选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{
background-color:yellow;
}
未访问、已访问、悬浮和活动链接
a:link {color:blue;} 未访问
a:visited {color:blue;} 已访问
a:hover {color:red;} 悬浮
a:active {color:yellow;} 活动链接 ，鼠标点击下去
2.
>子选择器
+相邻选择器
~匹配选择器 元素后面所有符合的元素
参考链接
https://www.cnblogs.com/zqzjs/p/4676138.html
// ————————————————————————————————————————————————
附加学习：
1.sass
Sass的快速入门 https://www.sass.hk/guide/
一
变量
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
三个属性相连
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
下划线与中划线同等
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
二
嵌套的css 父到子
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
同层组合选择器
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
三
嵌套的属性
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
相当于
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
nav { //left，right为例外规则
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
同等于：
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
注释 ： 不太懂
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
混合器
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
即表示
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
10. css伪类 ： hover鼠标移上的事件
css + nav { margin-top: 0 }
article section 与 article ~ section 区别
article section 父子关系
article ~ section 同级关系，article后面的所有section元素
2.ejs
// ————————————————————————————————————————————————
任务：
1.传递邮箱到huawei，初始版本
http://www.php.cn/js-tutorial-370292.html
registry=http://cmc-cd-mirror.rnd.huawei.com/npm
不加--registry=https://registry.npm.taobao.org会有什么影响么？
npm install -g cnpm --registry=https://registry.npm.taobao.org
走的源不同 不加的话走的是官方的源 加了走的是淘宝的源
如果没有.npmrc文件需要在终端设置以下内容
npm config set no-proxy .huawei.com
npm config set registry http://w3-beta.huawei.com/nexus/npm/repository/npm-group/
如果有的话就写死了，不用再终端设置了
6.4
NaN与自身不相等（NaN不与任何值相等）NaN 属性是代表非数字值的特殊值。
isNaN(NaN) true 非数字
isNaN(20) false 数字
isNaN(’10’) false 可以转换为数值10
isNaN(’abc’) true 非数字
isNaN(true) false 可以转换为数值1
语法糖（Syntactic sugar），也译为糖衣语法，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
constructor
英 [kənˈstrʌktə(r)] 构造函数
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
输出：
This is an Array
<script type="text/javascript">
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);
</script>
输出：
function employee(name, job, born)
{this.name = name; this.job = job; this.born = born;}
原型链
constructor __proto__ prototype
视频讲解
Webpack
https://www.cnblogs.com/-walker/p/6056529.html
1、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2、为什要使用WebPack
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
.........
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
优点：模块化
在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
二、--save -dev (问题：不写 —save 的话 默认存在哪里？ )
--save：将保存配置信息到pacjage.json。默认为dependencies节点中。
--dev：将保存配置信息devDependencies节点中。
因此：
--save：将保存配置信息到pacjage.json的dependencies节点中。
--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。
---------------------
作者：彼之方
来源：CSDN
原文：https://blog.csdn.net/qq_33745501/article/details/80271129
版权声明：本文为博主原创文章，转载请附上博文链接！
Gulp，Grunt 都是打包工具
把很多文件进行处理 图片，css ，sass .. vue 通过load 进行处理
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
6.5
终端，创建新文件
Mkdir ： 创建目录，创建文件夹
mkdir xxxdemo
Ls ： 即list ，查看当前文件夹目录
webpack hello.js hello.bundle.js —module-bind ‘css=style-loader！css-loader’
Css 交给 style-loader css-loader来处理
自动打包 webpack —watch
看到导报过程的 —progress
—display-module 查看打包模块 ，已经用什么处理
—display -reason 为什么去打包这个文件
Webpack 会默认寻找webpack.config.js 执行配置
如果不使用webpack.config.js ，指定其他js文件 webpack —config webpack.xx.js
则会参照 webpack —config webpack.xx.js 去执行配置
Entry 为数组的时候， 入口文件有多个，
npm run webpack
结果：将多个入口文件 打包成一个 ，
3. entry 为一个对象
使用场景 ：多页面应用，
chunk .块
webpack插件 npm install html-webpack —save-dev
var htmlwebpackplugin = require
用插件html-wepack-plugin 去生成打包的 index.html ,
然后写 template:’index.html’ . 于是就建立起始的 index.html 与打包 的index.html 的联系
npm install html-webpack-plugin
使用：在配置文件中建立对插件的引用
var htmlWebpackPlugin = require(‘html-webpack-plugin’);
在官网上文章：
描述插件使用，例子：
在项目中使用插件
增加属性 .对插件的传参，
Plugins：{ 在插件属性中初始哈
new html ： htmlwebpackplugin{
Template:”index.html’ 、、为什么一定是根目录中的index.html ，因为Context默认值为根目录
}
重新运行打包 ，则打包的html文件有了script 引入了两个
Context:’
看参数的详细解释 www.npmjs.com
搜索Htmlwebpackplugin
Entry:{
main：’./src/script/main.js‘，
a: ’./src/script/a.js‘，
} // 两个需要打包的js
output：{
Path: ‘./dist’, //定义打包位置 html ，和js 等等都在此位置
Filename: ‘js / [name] -[ chunkhash].js’ // js/ 定义打包的脚本的相对路径，然后后面跟上打包的脚本名字
}
Plugin:[{
Filename : ‘index-[hash].html’ , //打包后的index.html文件名称
Template: ‘index.html’, // 绑定的index.html 文件
Inject:’head’, // 将脚本放在 html 的 head 头部
Title:’webpack is good’, // 定义 title标题。
date : new date
}
]
起始的index.html 与 webpack.config.js 中的 Htmlwebpackplugin 联系
<%= htmlwebpackplugin.option.title %>
<%= htmlwebpackplugin.option.date %> =为直接取值 ， 运行js代码将 = 去掉
<% for (var key in htmlwebpackplugin) %> 取得两个key ，一个是files 一个是option
然后再遍历file 和 option 的key 查看
File中为 起始的js chunk 打包后的js 路径描述
option为 htmlwebpackplugin 的各种属性
问题： 想将 main.js 和 a,js 分别放在 head 和body 中
将inject 为false
然后 在起始的index.html 的head 中 写上 . . . 的属性值，渠道
publicpath ‘ 需要上线， http：//cdn.com/” 在打包的html中所引用的js的路径就会被 替换 成http
Minify： 对当前的生成html文件压缩
minify 参数
{
removeComments : true, 删除注释
Collapsewhitespace ; true , 删除空格
}
如何生成一个多页面html
继续调用一次 new htmlwebpackplugin{
Filename : ,
}
处理需要的自用文件
Es6 —
css less stylus
图片压缩 转base64 处理方式
开始loader的学习 : 处理资源，返回资源
开始整理目录 ，
重新建立了一个
去建一个组件的目录 component
建立一个layer的文件夹 layer,html css js
loader.js 特性
串联
同步异步 接受参数
命令行绑定， 正则表达式指定loader执行
loader npm 来安装
loader 获取webpack配置
使用loader方式
1，require
2，配置配置文件
3，使用cli
App.js 建立函数app.js
使用es6的语法
Import layer ftom ‘./component/layer.js’
const app = function(){
}
Layer,js
Import tpt from ‘./layer.html’
Function layer （）{
Return {
Name :’layer’,
tpl : ‘
}
}
Export default layer;
babel 官网
npm install —save-dev babel loader
{
}
Babel有一些插件
Layer.html
<div class = ‘layer’>
Layer.css
.layer{
Width : 600px,
Height: 200px ;
}
.div{
Width :400px ;
Height:
}
Css-loader
简单起见，本文只考虑开发环境(dev)和生产环境(prod)，测试环境可以自行类比。
综上，webpack的配置需要有两套，同时两套配置必然会存在相同的部分，故新建目录与文件如下图：
其实构造方法就是为了给类中成员赋初值~~~~~~~~~~~~~
change事件
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
html data 属性
使用 data-* 属性来嵌入自定义数据：
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>
中午不能回去
1. 王思聪ig抽奖豪车，朋友拿到，然后又返回给王思聪
2. 后来我明白 我并不是在意的是加不加班，而是在意的是共事的人 。
冬季里里跑过一只猫
加班
高考..
每次加班的时候我都安慰自己，比上学的时候轻松多了 。如是说
蜷缩在深圳的蜗居里，如图小猫居安居在墙角
那幻城中绽放的樱花
如果我换了个环境，说不一定是另一个样子
让我说”请”，给我面包
精神需要物质打基础
小时候父母套圈，表姐套中，妈妈却把小车给了我
再次套中摊主一副不讲理的样子
以和待人，以礼待人
面试，不能和善一点么
共同学习，写下你的评论
评论加载中...
作者其他优质文章
