Webpack
前端代码为何要进行构建和打包
1.代码层面
- 体积更小（压缩、合并），加载更快
- 编译高级语法（TS、ES6+、scss、模块化）
- 兼容性及错误检查（polyfill转换es6和新API、postcss给css增加前缀、eslint代码格式检查）
2.研发流程方面： - 统一、高效的开发环境
- 统一的构建流程、产出标准
集成公司构建规范（提测、上线等）
Bable-runtime 和 babel-polyfill 区别
Beble-runtime 只会对es6语法进行转换，而不会对新API进行转换
Bable-polyfill为当前浏览器环境提供它不具备的新语法和新API的垫片
Bable-core 用来将babel/parser转换的AST抽象语法树转换为浏览器可执行的代码
babel/preset-env : 将转换后代码转化成 ES5 代码
module chunk bundle 分别什么意思，什么区别
module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：
我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。

前端工程化和模块化
commonJs:服务端同步模块规范，同步方式不适合浏览器的异步加载 1）每一个文件都是一个模块，使用 require，使用 export 导出，
ADM：客户端的 js异步模块化规范，必须使用 definde 定义，通过 require加载 依赖其他模块，在定义模块之前就要去声明
CDM：国内的通用模块定义，可实现按需加载
loader 和plugin 区别
由于webpack只能打包commonJs的规范文件，所以针对图片、css等文件无法打包，loader专注于转化文件，完成压缩/打包/语言翻译等
css-loader 和style-loader是为了打包css
bable-loader和babel-core是为了把es6的代码转换成es5
Url-loader和file-loader img-loader是为了把图片进行打包
Plugin也是为了扩展webpack，作用于webpack本身：打包、优化、压缩、重新定义环境变量
html-webpack-plugin用于html文件的拷贝、打包,往我们的dist目录中生成一个index.html文件，并将我们打包的js文件引入到这个html中

Clean-webpack-plugin 打包后文件放到dist文件前 先将dist文件清空，保证每次的内容都是最新的

webpack.DefinePlugin 定义全局变量
webpack.NamedModulesPlugin 热加载时直接返回文件名而不是文件id（HMR shows correct file names in console on update.
）
NoEmitOnErrorsPlugin 编译出错时跳过输出阶段
CopyWebpackPlugin将文件或目录整个复制到构建目录
// hot 检测文件改动替换plugin
new webpack.HotModuleReplacementPlugin() 热模块自动替换插件，需要配合着webpack-dev-server进行使用，在打包文件发生改变的时候自动进行重新打包
Webpack 如何实现懒加载
Webpack常见性能优化
1.图片压缩loader:image-webpack-loader
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
}
}
静态项目是如何部署到服务器上的
Webpack就是一个js代码打包器
图片、css、less、ts等文件需要借助loader或者plugin来实现
Webpack 的 index.html 就是前端和服务器对接的入口文件，所有静态资源都会被放到 builds或者dist文件夹下，vue.config.js 中 publicPath配置了项目要放置在服务器中的路径，assetsDir设置了静态资源在服务器中的位置，然后服务器上就会启动一个静态站点指向这个文件目录，最终在服务器上跑的就是Index.html 和 builds 文件夹
SPA

SSR - 服务端渲染
- 在服务端将vue实例渲染为html字符串直接返回， 在前端激活为交互程序，重新变成一个spa应用，
- 这样后续用户再点击超链接跳转时，就不会向服务端发送请求了，而是使用前端路由跳转，而是只发送一些用户数据 ，
- 搜索引擎爬虫在SPA 中是抓取不到页面通过 Ajax 获取到的内容；而且nuxt返回的html是有内容的，所以有利于搜索引擎的seo操作
- SPA会等待所有vue编译后的js文件下载完成再进行渲染，但是ssr是渲染好返回的，所以加快了首屏时间
缺点：
开发逻辑比较复杂
开发条件限制，比如一些生命周期（只支持 beforCreate 和 \ 两个钩子函数）和第三方库不能用
服务器负载大，在nodejs中渲染完整的应用程序，要更加占用cpu资源
处于 Node.js server 运行环境

CSR - 客户端渲染
SEO
1.不同的页面有不同的url，尽量少用tab ： seo是按页面纬度投放，投放的网页越多，用户流量就越多，所以url要唯一、简短并且有意义
2.给移动端提供不同于pc端的网址、自适应设计和动态提供内容
3.网页打开时间，会影响用户的搜索体验
4.页面元素三档：
TDK： tetle\keywords\description （三者可配置）影响搜索词和搜索结果
H标签和ALT标签帮助搜索引擎理解见面重点内容和图片
5.重要内容最好同步异步（因为搜索引擎抓取不到异步内容）
6.结构、表现和行为的分离。不要把css和js放在同一个页面，采用外链的方式能大大加快网页加载速度。
7.a标签加title src标签加上alt属性
8.
Nuxt 是如何运行、渲染的
nuxt：
- 简介：基于 vue.js 的服务端渲染,是在服务端对 vue页面进行渲染生成 html 文件，再将 html 文件（html 字符串）传回给浏览器，不同于SPA 的单页面只有一个空的 Html 和 app.js，nuxt 生成的 html 是有内容的，所以更有利于搜索引擎的 seo 操作，并且加快了首屏加载时间。
Nuxt流程：
用户输入网址后请求到 nodejs
部署在 nodejs 的nuxt 应用接收到浏览器请求，请求服务端获取数据 （渲染流程：发起访问-执行 store 中操作-执行中间件-动态路由检验-获取数据）
Nuxt获取数据后在服务端进行渲染
将渲染后的 html 返回给浏览器（vue 接管 由服务器发送的 html，使其变成由 vue 接管 dom 的过程）
nuxt和webpack、vue 、node的关系（为什么要用到 webpack）：
node作为渲染引擎，支持服务端渲染
nuxt 基于 vue编写， 通过webpack 来打包 vue 文件。
通常来说 vue 程序是通过 webpack 结合 vue-loader构建 ，并且如导入 css 文件需要用 css-loader、导入文件需要用到 file-loader 等特定功能不能直接通过 nodejs 完成，并且浏览器转译 es5代码等都需要webpack 来构建 。