webspack 系统学习笔记 - - - 重点记录
Webpack 系统学习笔记
2-1.webpack 是什么？
npx: 寻找可执行脚本，进行临时执行，如果没有找到包，就会临时下载，命令结束后，删除包，避免长期污染。
npx webpack xx.js. 直接打包JS文件
2-2.什么是打包工具：
webpack是一个模块打包工具。
一切皆模块，按需加载
import header from ‘./header.js’. - - - ES moudule 引入
require header from ‘./header.js’ - - - common.js 引入
CMS，AMD等查看
https://www.webpackjs.com/api/module-methods/#es6-%E6%8E%A8%E8%8D%90-
课后作业：学会如何读API。
module-methods,
module-variables
2-3. 正确的安装方式
提升webpack打包深度 - - 1.node.js 最新版本。2.webpack最新版本
2-4 使用webpack 打包配置
npx webpack 优先使用全局webpack,如果没有就往下找
在script 中webpack，优先使用项目工程的中的webpack
2-5 浅析 Webpack 打包输出内容
webpack 打包出来之后，现实的内容意义
3-1 loader
webpack默认能打包JS文件，当遇到其他文件时，会去modules下寻找rules匹配规则，使用相对应的loader来打包。
官方loader库：https://www.webpackjs.com/loaders/url-loader/
3-2 url-loader
url-loader中mimetype的设定是用来指定图片以base64格式打包进入到js后的格式。
3-3 loader 打包静态样式 上
loader执行顺序是从下往上执行，多个loader从数组最后开始执行，相关API以及配置信息在官网对应配置就好
3-4 loader 打包静态样式 下
引入css，并且有socped的概念，采用方式
import style from “./index.scss”;
img.classLists.add(style.avatar)；
资源管理。
3-5 使用plugins 更健康
htmlWebpackPlugins会在打包后自动生成一个html 文件，并且把打包生成的JS ,CSS 文件引入
3-6 Entry 与 Output 的基础配置
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
output 配置多，API，概念 和指导 都可以。
3-7 SourceMap 的配置
进行映射，方便错误查找，直接查找到源文件，如果不设置sourcemap，能看到就是打包后到文件，不能直接映射到源文件去
devtool:
inline-source-map : 打包都文件内部，以date形式嵌入
inline-cheap-source-map：
带了cheap的模式 在速度和效率上都会提升,
1.只打包业务打包，不映射第三方插件。
2.只提示行错误，不提示列错误
3-8 使用 WebpackDevServer 提升开发效率
devServer ：
1.webpack-devServer. 最常用的方式
2. —watch 最简单的，但是不全面
3.node.js 基于express结合webpack 自己写devServer,
node中APi ,https://www.webpackjs.com/api/node/#webpack-
3-9 Hot Module Replacement 热模块更新（1）
new webpack.HotModuleReplacementPlugin() 配合
hot:true, hotOnly:true 做不刷新页面的热替换
3-10 Hot Module Replacement 热模块更新（2）
module.hot这类可以直接在业务代码中写。对于文件的监听，CSS的监听是laoder中内置了，主要是一些偏的文件，比如，cexl
3-12 使用 Babel 处理 ES6 语法（2）
babel-polypill 是全局注入方式，会造成变量的全局污染，所以在封装内组件库等，使用@babel/plugin-transform-runtime，以闭包形式注入。
4-1 Tree Shaking 概念详解
Tree Shaking只支持es modules 引入方式（静态引入），
sideEffects:false。全部设置无副作用。
sideEffects：单独提出来，不做tree shaking 操作，vue项目中都有副作用，
vue参考配置：
"sideEffects":[
"*.css",
"*.vue",
"*.less",
"./src/plugins/element.js"
],
不支持cmmonjs,AMD 的引入方式（动态引入）
webpack —config webpack.dev.js. 启动使用webpack.dev.js 配置文件
4-2 Develoment 和 Production 模式的区分打包
提出comon.js 使用webpack-merge 去链接公用部分
4-3 Webpack 和 Code Splitting（1）
解决：（都把代码打包到main.js）
1.解决打包时间长，加载资源时间长
2.第三方库资源和业务代码分开，不然每次修改业务代码，用户都需要全量下载
分割方式：
1.同步代码：webpack自带的配置
splitChunks:{
chunks:'all'
}
2.异步代码：引入文件，自动做代码分割
4-5 SplitChunksPlugin 配置参数详解（1）
注意同步异步区别，同步还需要在cachgroups中处理
默认配置:https://www.webpackjs.com/plugins/split-chunks-plugin/
参数在webpack英文版去找，1中文版部分确实，对于API的说明
4-7 Lazy Loading 懒加载，Chunk 是什么？
懒加载：异步加载，通过异步import 的方式
chunk:打包后得每一个JS代码块，都是一个chunk，
4-8 打包分析，Preloading, Prefetching
shit+command+p ->show coverage 等相关的内容
高性能代码 -> 代码使用率，异步加载代码，非主进程立刻使用代码，均可以使用异步加载。
Preloading: 同主进程一起加载
Prefetching：网络空闲后，加载
4-9 CSS 文件的代码分割
chunkFilename ->非直接引用在index,html中的文件，打包后使用这个名字
filename: -> 和chunkfilename 相反，直接在index。html中引入的
需要修改打包出来的vender的文件名，在
cacheGroups:{
filename:"static/js/vender.[hash].js"
}修改，同时，需要设置 chunks: 'initial'
mini-css-extract-plugin做CSS 代码分割
4-10 Webpack 与浏览器缓存( Caching )
content_hash 避免每次都从那取
4-11 Shimming 的作用
shinming:垫片，对于underfined，可以用webpack指定
内置插件（示例）：https://www.webpackjs.com/plugins/provide-plugin/
5-1 Library 的打包
主要是库打包教程，设置UMD格式 。
支持AMD，CMD，import等引入方式，需要支持CSDN方式的话， 需要配置library参数
https://www.webpackjs.com/configuration/output/#output-library
防止重复包打进：https://www.webpackjs.com/configuration/externals/
5-2 PWA 的打包配置缓存机制
http-serve 插件可以直接启动本地服务,
PWA ,服务器挂掉，能短时间访问，workboxPlugin
5-4 使用 WebpackDevServer 实现请求转发
der-serve 中配置proxy 中配置代理
5-5 WebpackDevServer 解决单页面应用路由问题
historyApiFailback:true 路由寻找的时候，会在本地找
rewrites:[]. 路由没找到，重定义路由转发
参考：https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback
线上环境需要在ng里后端处理，这里处理的只是devserve中的配置
5-6 EsLint 在 Webpack 中的配置（1）
官网：https://eslint.bootcss.com/docs/user-guide/configuring
VS -code 中安装es-lint
在eslintrc 中配置rule 忽略规则
5-8 webpack 性能优化(1)
1.跟上速度的迭代，升级node,webpack 版本
2.尽可能少的使用loader
3尽可能少的pulgin
4.resolve 的使用https://www.webpackjs.com/configuration/resolve/#resolve-extensions
5.使用DLLplugin 提高打包速度，把部分第三方模块单独打包一次，处理映射关系
6.three-loader,happywebpack,paralledl-webpack 多进程打包
7.合理使用sourceMap
7-3 Vue CLI 3 的配置方法及课程总结（1）
vue.config.js 需要修改在这个文件自建修改
