一、核心概念

Core Concepts:

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility：浏览器兼容性

二、webpack 新特性

v5.0.0-beta.*
beta 版本：v5.0.0-beta.*
V5引入了两个新概念“微前端”（micro front-end）和“模块联合”（module federation）
新特性戳这里：https://webpack.js.org/concepts/module-federation/

v4.43.0
最新稳定版：v4.44.1

三、常用 loaders 和 plugins

由于webpack 本身只能打包 commonjs 规范的 js 文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。

1. loader 和 plugin 的区别

loader：
loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。
loader是运行在NodeJS中。
loader运行在打包文件之前（loader为在模块加载时的预处理文件）
plugin：
plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。
plugin 可以携带参数
plugin 在整个编译周期都起作用。

2. loaders

webpack 相关 loaders

3. plugins

webpack 相关 plugins

四、针对www.hjclass.com_static的改造点

1. 采坑记录 见 webpack To v4 from v2

2. 上代码

tips: 针对项目进行打包升级时，可能还要继续对该仓库的业务代码进行改动（如产品喊你改bug了，项管给你排新需求了），为了不影响正常开发，推荐做法是在本地另建一个目录，将项目重新拉取到这个目录，此外，打包升级很可能会涉及到node升级，因此本地一定要安装node版本管理工具，这样每次切换一下node版本，然后再在两个不同的工作目录进行。

五、优化思路和打包速度提升

👉 戳这里直达