webpack要点

理解webpack

官方介绍：webpack是js模块化打包工具。
也就是说，这个工具是把模块化的js工程打包成1个或多个bundle。
不仅仅是js，工程依赖的任何类型文件，webpack都将其视为module进行打包，这得益于webpack的核心机制之一“loader”。loader的作用就是将项目中的非js模块转换为js，也可以将高版本js转换为低版本js（babel-loader）。
webapck另一个核心机制是Plugin，plugin拓展了webpack的能力。

依靠loader和webpack两大核心机制，webpack成为现代化前端开发的基础工具，几乎包办了所有从开发到打包的需要解决问题。

常用loader

处理样式：

style-loader, css-loader, less-loader

处理资源：

file-loader、url-loder、raw-loader
这个3个loader为webpack4需要的，webapck5直接使用内置资源模块。

处理兼容性：

babel-loader
postcss-loader

拓展语法：

ts-loader
jsx-loader
vue-loader

语法规范

eslint-loader 在编译阶段进行语法校验

常用Plugin

define-plugin 定义环境变量
html-webpack-plugin 生成html到dist目录
copy-webpack-plugin 复制public目录下的文件到dist目录
clean-webapck-plugin 清除dist目录的旧打包文件，webpack4才需要，5直接配置
terser-webpack-plugin 压缩代码。v4需安装，v5自带。
mini-css-extract-plugin 提取css为单独文件
ProvidePluginwebapck自带，可自动引入模块
SplitChunksPlugin 代码分割。webpack4和5自带，开箱即用。
Dllplugin 本地缓存已打包的bundle，加速构建。webapck4才需要，webapck5自带类似功能。