在webpack中配置.vue组件页面的解析(vue-loader)

最新推荐文章于 2025-10-25 13:11:06 发布

原创

最新推荐文章于 2025-10-25 13:11:06 发布 · 6.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#在webpack中配置.vue组件页面的解析(vue-loader) #webpack 中如何使用 vue :

本文介绍了如何在webpack中配置.vue组件页面的解析，包括安装vue及相关loader，创建.vue组件，使用render函数渲染组件，并在webpack.config.js中设置module规则。同时强调了new VueLoaderPlugin()插件的重要性。

在webpack中配置.vue组件页面的解析

运行cnpm i vue -S将vue安装为运行依赖；
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
new VueLoaderPlugin() 引入这个插件，必须的
ps：注意引入const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) ———在之前的版本中好像不需要这个插件，再看教程的时候还是跟着官方文档来 vue-loader
在webpack.config.js中，添加如下module规则：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
   
   
  mode: 'development',
  module: {
   
   
    rules: [
      {
   
   
        test: