npm -i nrm -g 安装nrmcss
nrm ls 查看 源地址html
nrm use npm 切换不一样的源地址前端
npm i cnpm -g 安装cnpmvue
js node
.js .jsx .coffee(中间语言) .ts(中间语言)须要编译jquery
csswebpack
.css .sass(.scss) .lesses6
imagesweb
.jpg .png .gif .bmp .svgvue-router
字体文件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 -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 文件中
默认状况下，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
}}
在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 中，使用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.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代码压缩
minify:{
collapseWhitespace:true,
removeComments:true,
removeAttributeQuotes:true//移除属性上的双引号
}
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文件的插件