npm -i nrm -g 安装nrm

nrm ls 查看 源地址

nrm use npm 切换不同的源地址

npm i cnpm -g 安装cnpm

js 

.js .jsx     .coffee(中间语言) .ts(中间语言)需要编译

css

.css .sass(.scss) .less

 images

.jpg .png .gif .bmp .svg

 字体文件fonts 

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue[这是在webpack 中定义组件的方式，推荐这么用]

网页中引入的静态资源多了以后会有什么问题

1.网页加载速度慢，因为要发起很多的二次请求

2.要处理错综复杂的依赖关系

如何处理上述两个问题

1.合并，压缩，精灵兔，图片的base64编码

2.可以使用之前学过的requireJS，也可以使用webpack可以解决各个包之间的复杂依赖关系；

什么是webpack

前端的项目构建工具，他是基于node.js开发出来的一个前端工具

如何完美解决上述的2种解决方案

1.使用gulp,是基于taskr任务

2.webpack，是基于整个项目进行构建的。

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并，打包，压缩，混淆等诸多功能

根据官网的图片介绍webpack打包的过程

3.webpack 安装方式

npm i webpack -g 安装webpack

webpack  ./main.js  ./dist/bundle.js

不能编译的问题webpack 版本过高

1.webpack 能够处理js文件文件的相互依赖关系

2.webpack 处理js的兼容问题，吧高级的，浏览器不识别的转为低级的，浏览器能够识别的

刚才运行的命令格式：webpack ./src/main.js -o ./dist/bundle.js --mode development

*****改代码得重新打包，怎么解决这个问题呢？

当我们在命令行输入npm run dev 1.首先发现我们并没有通过命令的形式，给他制定入口和出口2.webpack 就回去项目的根目录找一个叫做webpack.config.js的配置问题件3.但找到配置文件后，webpack回去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，到处的配置对象4.当webpack拿到配置对象后，就拿到了配置对象中，制定的入口和出口，然后进行打包构建；

webpack-dev-sever 工具来实现自动打包编译的功能

npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖2.安装完毕后，这个工具的用法和webpack 命令的用法，完全一样

node nodemon

webpack webpack-dev-server

3.由于，我们是在项目中，本地安装的webpack-dev-server,所以无法把它当做脚本命令，在powershell 终端中直接运行；（只有那些安装到全局-g的工具，才能在终端正常执行）

4.注意：webpack-dev-server这个工具，如果想要正常运行，要求在本地醒目中，必须安装webpack

5.webpack-dev-server帮我们打包生成的bundle,.js文件并没有存放到实际的物理磁盘上而是直接托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的bundle.js

6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咱么项目的根目录中，虽然我们看不到它，但是，可以认为，和dist src node_moduels 评级，有一个看不见的文件，叫做bundle.js

js中引入css 注意webpack 默认只能打包处理js类型的文件，无法处理其他的非js 类型的文件；如果需要处理费js类型的文件我们需要手动安装一些合适的第三方loader加载器

loader 顺序调用时从右调用。 

当我们在控制台直接输入webpack命令执行的时候，webpack做了一下几步

1.首先，webpack发现我们并没有通过命令的形式给它制定入口和出口

2.webpack 就回去项目根目录中，查找一个叫做webpack.config.js的配置文件

3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，到处的配置对象

4.当webpack 那高配置对象后，就拿到了配置对象中，制定的入口和出口，然后进行打包构建

cnpm i less-loader -D  .less文件引入报这个错 

cnpm i less -D

cnpm i sass-loader -D    .sass 文件引入报错

cnpm i node-sass -D

在内存中，根据制定的模板页面，生成一根内存中的首页，同事自动把打包好的bundle中注入到页面底部

如果要配置插件，需要在到处的对象中，挂载一个plugins

package.json文件中

var htmlWebpackPlugin=require('html-webpack-plugin')

webpack.config.js 文件中

urlloader

默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url都处理不了

cnpm i url-loader file-loader -D

limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或邓毅给定的limit值，泽不会被转为base64格式的字符串，如果图片小鱼给定的limit值，泽会被转为base64的字符串，name=[name].[ext]保留文字的名字后缀名

处理字体

如果需要通过路径的形式，去引入node_modules中的相关的文件，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径

//不写node_modules这一层目录，默认就会去node_modules中查找

import 'bootstrap/dist/css/bootstrap.css'

webpack babel

class Person{

static info ={

name:'ddd',age:12

}}

es6  webpack

在webpack 中，默认只能处理一部分Es6的新语法，一些更高级的Es6或者ES7语法，webpack是处理不了的，这时候就需要借助于第三方的loader来帮助webpack处理这些高级的语法，当第三方loader吧高级语法转为低级的语法之后，会把结果交给我webpack去打包到bundle.js

通过babel可以帮我们将高级语法转换为低级的语法。

1.在webpack中，可以运行如下两套命令安装两套包，去安装babel相关的loader功能

第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

只转换，不知道对应关系

第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

语法可以知道对应关系

2.打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

注意：1.在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉：原因有两：1.如果不排除node_modules，则babel会把node_modules中所有的第三方js文件，都打包编译，这样，会非常消耗CPU，同时打包速度非常慢2.哪怕最终，babel把所有node_modules中的js转换完毕了，但是项目也无法正常运行

3.在项目的根目录中，新建一个叫做。babelrc的babel配置文件，这个配置文件，属于json格式，所以在写.babelrc配置的时候，必须符合json语法规范，不能写注释，字符串必须用上引号，

3在.babelrc写如下的配置：{

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

}

vue conponent 注册的组件 会在id下加入组件

render注册的组件，会把id删掉，替换

在webpack中使用Vue

在webpack 中，使用import Vue from 'vue' 导入的Vue 构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式

回顾包的查找规则：

1.找项目根目录中有没有node_modules的文件夹

2.在node_modules中根据报名，找对应的vue文件夹

3.在vue文件夹中，找一个叫做package.json的包配置文件

4.在package.json文件中，查找一个main属性（main属性制定了这个包在被夹在时候的入口文件）

如果vue要使用网页引入1.可以直接改package.json文件中的main入口，直接改为vue.js

2.给个路径 import Vue from '../node_modules/vue/dist/vue.js'

3.webpack.config.js中配置

resolve:{

 alias:{

"vue$":"vue/dist/vue.js"

}

}

默认webpack，无法打包vue 文件，需要手动安装相关的loader

cnpm i vue-loader vue-template-compiler -D

在配置文件中，新增，loader配置项

node中向外暴露成员的形式：

//module.exports={}

在Es6中，叶童过规范的形式，规定了如何导入和导出模块

Es6中导入模块，使用import 模块名称 from '模块表示符'  import '表示路径'

在Es6中使用export default 或者export向外暴露成员export default  暴露出去引入的时候可以随便取名字，在一个模块中，export default只允许向外暴露一次，在一个模块中，可以使用export default和export

使用export向外暴露的成员只能使用{}的形式接受 import {title} from "test.js",这种形式，叫做按需导出，export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候，不需要，泽可以不再{}中定义，使用export导出的成员，必须用按个按照导出时候的名称，来使用{}按需接收{title as t} 使用as取别名 使用export导出的成员，如果就想换个名称来接收，可以使用as来取别名

//在Node中使用var 名称=require('模块标识符')

module.exports 和exports

vue-router

render会把el指定的容器中，所有的内容都清空覆盖，所以不要把路由的touter-view和router-link直接写到el控制的容器中

App这个组件视同过VM失礼的render函数渲染出来的，render函数如果要渲染组件，只能放到el:'app'所指定的元素中，

//account 和goodsList组件，是通过路由监听到的所以这两个组件，只能展示到属于路由的<router-view></router-view>中去

.vue <style scoped></style>

普通的style只支持普通的样式，如果想要启用scss或less需要为style元素设置lang属性

lang="scss"

webpack发布策略

webpack.config.js

webpack.pub.config.js

"pub":"webpack --config webpack.pub.config.js"

打包的图片放到images

yarn add clean-webpack-plugin --dev 每次发布清空dist文件夹

导入每次删除文件夹的插件

const cleanWebpackPlugin=require('clean-webpack-plugin')

发布思路，bundle.js只存放自己的代码，第三方包的代码，全部抽离到另外的js中

const webpack =require('webpack')

name:'vendors1',//制定要抽离的入口名称

filename:'vendors.js'

})

压缩代码

compress:{

warnings:false

}

}),

//设置上限环境，jinx一部压缩代码

"process.env.NODE_ENV":'"production"'

}),

html代码压缩

Css抽取插件

yarn add extract-text-webpack-plugin --dev

style压缩

cnpm i optimize-css-assets-webpack-plugin --save-dev

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件