(理解)webpack中plugin的作用和loader

认识Plugin

• Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

  • While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables
  • 翻译：虽然加载器用于转换某些类型的模块，但可以利用插件执行更广泛的任务，如包优化、资产管理和环境变量注入

• 上面表达的含义翻译过来就是：

  • Loader是用于特定的模块类型进行转换(但也就仅此而已了，所以Loader跟plugin是很不一样的)

    然后复习下Loader的概念

    npm install sass 安装的是 Sass 编译器，它是一个独立的工具，用于将 Sass/Scss 样式文件编译成 CSS 文件。 Sass 编译器能够将 Sass 语法或者 Scss 语法转换为 CSS 语法，并输出为 CSS 文件，方便浏览器或者其他设备渲染。在使用 Sass 编译器时，需要手动运行命令才能将 Sass/Scss 文件编译成 CSS 文件，而无法自动集成到 Webpack 构建流程中。

    相比之下，Webpack 中的 sass-loader 是一个 Loader，可以集成到 Webpack 构建流程中，让 Webpack 能够将 Sass/Scss 样式文件编译成 CSS 文件。sass-loader 能够自动地将 Sass/Scss 文件编译成 CSS 文件，并将其打包进最终的 JavaScript 文件中，使得我们可以直接在浏览器中使用编译后的 CSS 文件。

    在使用 Webpack 进行项目构建时，使用 sass-loader 能够使我们更方便地处理 Sass/Scss 样式文件，将其转换成能够直接在浏览器中使用的 CSS 文件，并能够将其集成到构建流程中，自动化地处理样式文件

  • Plugin可以用于执行更加广泛的任务(能够贯穿整个webpack的周期)，比如打包优化、资源管理、环境变量注入等