webpack——Vue 单文件组件_vue webpack 怎么更新单个文件-优快云博客

本文链接：https://blog.youkuaiyun.com/feng920435385/article/details/103635808

本文详细介绍了如何在Webpack中配置vue-loader，实现Vue组件的加载和解析，包括安装依赖、配置Webpack、创建Vue实例及使用render函数渲染组件，最后通过打包命令完成应用部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack 中配置 vue 组件的加载器

运行 npm i vue-loader vue-template-compiler -D 命令
在 webpack.config.js 配置文件中，添加 vue-loader 的配置如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module: {
    	rules: [
        	// ..其它规则
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    plugins: [
    	// ...其它插件
        new VueLoaderPlugin()  // 请确保引入这个插件！
    ]
}

在 webpack 项目中使用 vue

运行 npm i vue -S 安装 vue
在 src -> index.js 入口文件中，通过 import Vue from ‘vue’ 来导入 vue 构造函数
创建 vue 的实例对象，并指定要控制的 el 区域
通过 render 函数渲染 App 根组件

// 1. 导入 vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
	// 3. 指定 vm 实例要控制的页面区域
    el: '#app',
    // 4. 通过 render 函数，把指定的组件渲染到 el 区域中
    render: h => h(App)
})

webpack 打包发布

上线之前需要通过 webpack 将应用进行整体打包，可以通过 package.json 文件配置打包命令：

// 在 package.json 文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
	// 用于打包的命令
    "build": "webpack -p",
    // 用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
},