前端构建工具webpack(持续更新)

基础篇

一、webpack是啥？
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

二、如果你还不知道webpack是什么，为什么要学习webpack,请走下面的绿色通道
https://baijiahao.baidu.com/s?id=1708753582745612917&wfr=spider&for=pc

三、在学习webpack 你可能要了解三个专业术语

module:提供比完整程序接触面（surface area）更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
chunk:这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由chunk 组成，其中有几种类型（例如，入口 chunk（entry chunk）和子 chunk（child chunk））。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。
bundle:由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。

四、大约你可能会在编译打包的时候遇到这样的错误
webpack : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
解决办法：
以管理员身份打开powershell（通过快捷方式右键就可以看到了）
出入 Set-ExecutionPolicy RemoteSigned命令修改权限为RemoteSigned

五、 webpack里面的五大核心概念
1、entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
2、Output输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
3、Loader Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)
4、Plugins 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5、Mode development/production
以下例子是如何自定义一个webpack.config.js文件

六、安装webpack
在此之前你需要搭建node环境，这里就不说了~~
1、初始化package.json 终端输入npm init
2、下载安装webpack
npm install webpack webpack-cli-g 全局安装
npminstallwebpackwebpack-cli-D 局部安装

七、webpack打包样式资源

文件目录/编译结果/打包结果

八、webpack打包html资源/图片以及其它资源（不一一举例了）

九、如何提取css成为单独文件以及css的兼容以及压缩css提取css的时候我们需要用到一个插件mini-css-extract-plugin
具体代码如下：

css兼容性处理：postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
"browserslist": {
"development": [],
"production": []
},

十、开启JS的语法检查

另外pake.json里面还要设置：
插件引入：eslint-config-airbnb-base

十一、JS兼容性处理
js兼容性处理：babel-loader @babel/core
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js

十二、JS压缩
打包生产环境的时候会自动压缩

十三、HTML压缩

十四、HMR前端热模块替换/热更新（基于devServer）
HMR: hot module replacement 热模块替换 / 模块热替换
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）所以一定要style-loader

可以通过module.hot方法去更新需要热更新的模块

十五、souce-map
为什么要用souce-map呢？因为我们打包之后的代码是压缩的，难以调试
souce-map参数：每一种参数都有不同的意义，这里就不说了~

开启方式：

十六、oneof
执行loader中的一项，不需要每个文件都要被所有的loader执行

十七、缓存
缓存分为两种
1) babel缓存   cacheDirectory: true
2) 文件资源缓存三种
1）hash 每次wepack构建时会生成一个唯一的hash值。因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
2) chunkhash  根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样问题: js和css的hash值还是一样的，因为css是在js中被引入的，所以同属于一个chunk
3) contenthash   根据文件的内容生成hash值。不同文件hash值一定不一样让代码上线运行缓存更好使用

十八、tree shaking
意义：去除无用代码，减少打包体积，代码运行更快
开启方式：ES6模块化以及生产环境 process.env.NODE_ENV = 'production';
但是在package.json中需要配置sideEffects，如果 "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking），很有可能去
去掉一些css/@babel/polyfill等副作用的代码，无意之间影响功能，所以必要的时候还是要配置下，如"sideEffects": ["*.css", "*.less"]

十九、code split 代码分割
optimization 单入口，多入口，还可以通过import中动态导入的方法去单独打包
意义：实现代码的并行加载，让代码运行更快

二十、懒加载，预加载

二十一、PWA（离线访问技术）
workbox-webpack-plugin