webpack一些常用的Loader和Plugin

文章目录

• • webpack4一些常用的Loader：
  • webpack4一些常用的Plugin：
  • 关于webpack5的一些特点：
  • • 新增特性：
    • 修复的问题：
    • 内置模块和工具：
  • 关于webpack5的一些内置:
  • • 内置Loader：
    • 内置Plugin：

webpack4一些常用的Loader：

• babel-loader： 将ES6转化为ES5。
• ts-loader： 将TypeScript转化为JavaScript
• vue-loader： 将Vue转化为JavaScript
• eslint-loader: 通过 ESLint 检查 JavaScript 代码。
• css-loader： 加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性。
• style-loader： 把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
• less-loader ： 将Less编译成CSS。
• sass-loader： 将Sass编译成CSS。
• postcss-loader ： 使用PostCSS处理CSS。
• file-loader： 把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。
• url-loader： 和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。
• image-loader： 载并且压缩图⽚⽂件。
• source-map-loader： 加载额外的 Source Map ⽂件，以⽅便断点调试。
• cache-loader ： 为其他 loader 提供缓存功能，避免重复执行。
• thread-loader： 将 loader 的执行过程放在单独的 worker 池中运行，来减少主线程的压力，提高构建速度。

---

webpack4一些常用的Plugin：

• CleanWebpackPlugin： 用于在每次构建前清理输出目录中的文件
• CompressionWebpackPlugin: 用于对打包后的资源文件进行gzip
• HtmlWebpackPlugin: 用于生成HTML文件，并将打包后的资源文件自动引入
• MiniCssExtractPlugin: 用于将CSS提取为单独的文件
• DefinePlugin： 用于定义环境变量
• UglifyJsPlugin： 用于丑化压缩JavaScript
• CopyWebpackPlugin: 用于将静态文件直接复制到输出目录中
• HotModuleReplacementPlugin: 用于实现模块热替换
• FriendlyErrorsWebpackPlugin： 用于友好的展示webpack构建错误信息
• webpack-bundle-analyzer： 用于可视化分析打包后模块的大小和依赖

---

关于webpack5的一些特点：

Webpack5相对于Webpack4来说，新增了很多特性和功能，修复了一些问题，同时也内置了一些新的模块和工具。以下是一些主要的区别：

新增特性：

• 内置静态资源构建能力： Webpack5通过添加4种新的资源模块类型（asset/resource、asset/source、asset等），来替换所有的loader，如raw-loader、url-loader和file-loader等。
• 性能优化： Webpack5相对于Webpack4来说，性能更高，打包速度更快。
• 更好的Tree Shaking： Webpack5提供了更好的Tree Shaking功能，可以更准确地识别和消除无用的代码，从而减小打包体积。

修复的问题：

• 长期缓存问题： Webpack4中，由于模块ID的不稳定性，导致长期缓存失效。Webpack5通过采用更稳定的模块ID生成策略，解决了这个问题。
• 配置复杂性问题： Webpack4的配置相对复杂，容易出错。Webpack5通过简化配置和提供更多的默认配置选项，降低了配置的复杂性。

内置模块和工具：

• 内置优化插件： Webpack5内置了一些优化插件，如ModuleConcatenationPlugin和SplitChunksPlugin等，用于优化打包结果和减小打包体积。
• 内置环境变量： Webpack5内置了一些环境变量，如process.env.NODE_ENV，用于指示当前的环境（开发环境或生产环境）。

此外，Webpack5还相对于Webpack4来说，支持更多的JavaScript新特性、更好的缓存机制等。

---

关于webpack5的一些内置:

在Webpack 5中，一些常用的loader和plugin被内置，这意味着你不再需要显式地在配置文件中安装和配置它们。以下是一些在Webpack 4中可能需要单独安装，但在Webpack 5中被内置的loader和plugin：

内置Loader：

• style-loader：在Webpack 5中，style-loader被内置为实验性功能。它允许你将CSS样式直接注入到HTML中。
• css-loader：用于解析CSS文件中的@import和url()等依赖关系。在Webpack 5中，css-loader也被内置为实验性功能。
• mini-css-extract-plugin：这个plugin在Webpack 5中被内置为asset/style模块类型。它用于从bundle中提取CSS到单独的文件。

内置Plugin：

• HtmlWebpackPlugin：这个plugin在Webpack 5中仍然需要单独安装，但Webpack 5为其提供了更好的集成和默认行为。它用于简化HTML文件的创建，并自动引入生成的bundle。
• TerserPlugin：用于压缩和最小化JavaScript代码。在Webpack 5中，TerserPlugin被内置为生产环境的默认压缩工具。

这里就说几个常见的，其他更多的去webpack5官网看吧