【八股系列】Loader和Plugin的区别是什么?

Loader 是一个转换器 ,它将源代码从一种格式转换成另一种格式。例如,你可以使用 LoaderTypeScript 代码转换成 JavaScript 代码。Loader 通常在 module.rules 配置中指定。

常用的一些 Loader

  • babel-loader : 用于将 ES6+ 代码转换成 ES5 代码,以便在旧版浏览器中运行。
  • css-loader : 用于将 CSS 代码加载到 JavaScript 模块中。
  • style-loader : 用于将 CSS 代码注入到 HTML<style>标签中。
  • file-loader : 用于将文件(如图片、字体等)加载到 JavaScript 模块中,并返回该文件的 URL
  • url-loader : 类似于 file-loader,但它可以将小文件(如图片、字体等)转换成 Data URL,以便在 HTML 中内联使用。
  • ts-loader : 用于将 TypeScript 代码转换成 JavaScript 代码。
  • sass-loader : 用于将 Sass/SCSS 代码转换成 CSS 代码。
  • less-loader : 用于将 LESS 代码转换成 CSS 代码。
  • vue-loader : 用于将 Vue.js 单文件组件 (SFC) 转换成 JavaScript 模块。

示例:

javascript 复制代码
// vue.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: ['file-loader']
      }
    ]
  }
};

Plugin 是一个扩展器,它可以对 webpack 的构建流程进行自定义。Plugin 通常在 plugins 配置中指定。例如,你可以使用 Plugin 来压缩你的 JavaScript 代码,或者生成一个 HTML 文件来为你的应用提供一个入口点。

常用的一些 Plugin

  • html-webpack-plugin : 用于生成一个 HTML 文件来为你的应用提供一个入口点。
  • clean-webpack-plugin: 用于在每次构建之前清理输出目录。
  • mini-css-extract-plugin : 用于将 CSS 代码提取到单独的文件中。
  • copy-webpack-plugin: 用于将文件从源目录复制到目标目录。
  • webpack-bundle-analyzer : 用于生成一个交互式的 webpack 包分析器报告。
  • terser-webpack-plugin : 用于压缩 JavaScript 代码。
  • optimize-css-assets-webpack-plugin : 用于压缩 CSS 代码。
  • compression-webpack-plugin : 用于将文件压缩成 gzipbrotli 格式。
  • webpack-merge : 用于将多个 webpack 配置合并成一个。

示例:

javascript 复制代码
// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};
相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者3 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴3 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟4 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1235 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js