webpack常用loaders和plugins

一、常用loaders

webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型，并转为有效的模块，加入依赖图中。
loaders，本身是个函数，接受源文件参数，返回转换结果。

loaders，本身是个函数，接受源文件参数，返回转换结果。

• css-loader，支持css文件的加载解析
• raw-loader，文件以字符串形式导入
• thread-loader，支持多进程打包js、css
• file-loader，进行图片字体富媒体等的打包

二、常用plugins

plugins处理loaders无法完成的功能。

1. CommonsChunkPlugin，将chunks相同的模块代码提取成公共js
2. CleanWebpackPlugin，清理构建目录
3. ExtractTextWebpackPlugin，将CSS从 bunlde 文件里提取成一个独立的CSS文件
4. CopyWebpackPlugin，将文件或者文件夹拷贝到构建的输出目录
5. HtmlWebpackPlugin，创建html文件去承载输出的bundle
6. UglifyjsWebpackPlugin，压缩 JS
7. ZipWebpackPlugin，将打包出的资源生成一个zip包

webpack4新出的mode，当前构建环境，可以为production，development，none。

设置 process.env. NODE_ENV的值为 development. 开启
NamedChunksPlugin 和 NamedModulesPlugin. 可在hmr阶段，控制台打印哪儿些模块使用了热更新，以及路径信息。

设置 process.env. NODE_ENV的值为 production. 开启
FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,
OccurrenceOrderPlugin, SideEffectsFlagPlugin和
Terserplugin.

process.env. NODE_ENV的值为none
不开启任何优化选项

本文地址：https://blog.csdn.net/liixnhai/article/details/107144778