Webpack5 vue-loader和VueLoaderPlugin

文章目录


vue-loader和VueLoaderPlugin的作用

.vue 文件是用户用 HTML-like 的语法编写的 Vue 组件。每个vue 文件都包括三部分 ,

VueLoaderPlugin 是一个解析 Vue.js 的插件,用于在 webpack 构建过程中解析和转换 .vue 单文件组件。它的作用是将 .vue 文件中的模板、样式和脚本进行编译,并将其转换为 JavaScript 模块,以供Webpack打包使用。

vue-loader 是一个 Webpack 加载器(loader),它与 VueLoaderPlugin 配合使用,用于处理 .vue 单文件组件。它会读取 .vue 文件的内容,并根据配置对其中的模板、样式和脚本进行相应的转换和编译,最终生成可在浏览器运行的 JavaScript 模块。

简单来说,VueLoaderPlugin 是一个插件,用于告诉 webpack 如何处理和解析 .vue 文件,而 vue-loader 则是实际执行加载和转换 .vue 文件的加载器。

vue-loader具体使用方式

vue-loader 默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang 属性的来实现。例如,你可以在组件的样式中这样用 SASS

javascript 复制代码
   // vue-loader不支持oneOf
      {
        test: /\.vue$/,
        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
        options: {
          // 开启缓存
          cacheDirectory: path.resolve(
            __dirname,
            "node_modules/.cache/vue-loader"),
         }
      }

注意事项

需要注意的是这两只需要下载 vue-loader 这个依赖就可以全部实现了,因为可以通过vue-loader去引入VueLoaderPlugin,具体方法就是:

const { VueLoaderPlugin } = require("vue-loader");

相关推荐
学前端搞口饭吃12 小时前
React props的使用
前端·javascript·react.js
灵感__idea12 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛12 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒12 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As331001012 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱12 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖12 小时前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
切糕师学AI12 小时前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo15 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip20 小时前
Jst执行上下文栈和变量对象
前端·javascript