Webpack中Loader与Plugin的核心区别及配置详解

Loader：模块源码转换与配置

Loader

Loader的主要作用是对模块源码进行转换。它描述了Webpack如何处理非JavaScript模块，并在构建过程中引入这些依赖。例如，Loader可以将TypeScript等语言的文件转换为JavaScript，或者将内联图像转换为data URL。常见的Loader包括CSS-Loader和Style-Loader等。

Loader的使用方式相对简单：

需要在webpack.config.js文件中指定Loader。通过module.rules可以配置多个Loader，从而对项目中的各个Loader有一个全局概览。

Loader运行在Node.js环境中，可以通过options对象进行配置。Plugin可以为Loader带来更多特性。Loader的功能包括压缩、打包以及语言翻译等。

Loader从模板路径解析，通常通过npm install安装到node_modules中。开发者也可以自定义Loader，命名规范为XXX-loader。

常见的语言类处理器Loader包括CoffeeScript、TypeScript、ESNext（通过Babel处理）、Sass、Less和Stylus等。无论使用何种开发技术栈，都可以使用Webpack进行构建。

Plugin：打包优化与高级功能

Plugin

Plugin的目的是解决Loader无法实现的其他任务，功能涵盖从打包优化和压缩到重新定义环境变量等，能够处理各种复杂的构建任务。Webpack提供了许多开箱即用的插件，例如CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件体积过大，或者按需加载的bundle文件导致加载时间过长，这是优化构建效率的重要手段。在多页面应用中，该插件还能为每个页面间的应用程序共享代码创建bundle。

Webpack配置机制与Mode设置

Webpack功能强大，但其难点在于配置文件。Webpack 4默认不需要配置文件，可以通过mode选项为Webpack指定一些默认配置。mode分为development和production两种，默认值为production。

插件可以携带参数，因此需要在plugins属性中传入new实例。

【Mode】配置既可以在config文件中设置，也可以在CLI参数中指定：webpack --mode=production（通常建议在CLI，即npm scripts中进行配置）。

在Webpack 4以下版本（如Webpack 3.XX）中，通过plugins进行环境变量的配置。

核心原理：Resolve、Manifest与打包流程

【resolve】模块：resolver是一个库，帮助Webpack找到bundle需要引入的模块代码。在打包时，Webpack使用enhanced-resolve来解析路径。

 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

【Manifest】用于管理所有模块之间的交互。runtime将能够查询模块标识符，并检索出背后对应的模块。

问题1：Webpack通过使用bundle计算content hash作为文件名称。当文件修改时，新的content hash指向新文件，导致缓存无效。但是，如果文件内容没有修改，计算的hash仍会改变，因为runtime和manifest的注入在每次构建中都会发生变化。要解决这一问题，需要深入了解runtime和manifest的相关机制。

Webpack的工作原理：从配置文件定义的模块列表开始处理应用程序，从入口文件开始递归构建一个依赖图，然后将所有模块打包为少量的bundle（通常只有一个），以便由浏览器加载。

到此这篇关于Webpack的Loader和Plugin的区别的文章就介绍到这了，更多相关Webpack Loader和Plugin内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！