Webpack: 搭建 Vue 全栈开发环境

最新推荐文章于 2025-11-16 13:59:23 发布

原创

最新推荐文章于 2025-11-16 13:59:23 发布 · 974 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

概述

传统 Web 开发通常会强调将页面的 HTML、CSS、JavaScript 代码分开用不同文件承载，这种思维本质上是将页面层级的结构、样式、逻辑分离成不同关注点；而现代 MVVM 框架

包括 React、Vue、Angular，则强调在组件内完成所有结构、样式、逻辑定义，从而进一步缩小关注点粒度，降低开发者心智负担，以 Vue 为例，通常可以选择使用 Vue SFC 形式编写组件代码：

<template>
  <div class="hello">
    <h3>{
    
    { message }}</h3>
  </div>
</template>

<script>
export default {
       
       
  data() {
       
       
    return {
       
        message: "Hello World" };
  },
};
</script>

<style>
h3 {
       
       
  margin: 40px 0 0;
  color: #42b983;
}
</style>

这种将整个页面拆解成组件的开发方式能够极大降低页面开发的复杂度，提升开发效率，但代价则是需要搭建一套适用的工程化环境，将 MVVM 框架组件转换为能够被普通浏览器兼容、运行的 HTML、CSS、JavaScript 代码。
使用 Webpack 搭建 Vue 应用开发环境的主要方法，包括：
- 如何使用 vue-loader 处理 Vue SFC 文件？
- 如何使用 html-webpack-plugin、webpack-dev-server 运行 Vue 应用？
- 如何在 Vue SFC 中复用 TypeScript、Less、Pug 等编译工具？
- 如何搭建 Vue SSR 环境？
- 如何使用 Vue CLI？

使用 Vue-loader 处理 SFC 代码

形态上，Vue SFC(Single File Component) 文件(*.vue)是使用类 HTML 语法描述 Vue 组件的自定义文件格式，文件由四种类型的顶层语法块组成：
<template>：用于指定 Vue 组件模板内容，支持类 HTML、Pug 等语法，其内容会被预编译为 JavaScript 渲染函数；
<script>：用于定义组件选项对象，在 Vue2 版本支持导出普通对象或 defineComponent 值；Vue3 之后还支持 <script setup> 方式定义组件的 setup() 函数；
<style>：用于定义组件样式，通过配置适当 Loader 可实现 Less、Sass、Stylus 等预处理器语法支持；也可通过添加 scoped、module 属性将样式封装在当前组件内；
Custom Block：用于满足领域特定需求而预留的 SFC 扩展模块，例如 <docs>；Custom Block 通常需要搭配特定工具使用，详情可参考 Custom Blocks | Vue Loader 。
原生 Webpack 并不能处理这种内容格式的文件，为此我们需要引入专用于 Vue SFC 的加载器：vue-loader。首先，依然是安装依赖：$ yarn add -D webpack webpack-cli vue-loader

之后，修改 Webpack 配置，加入 vue-loader 相关声明：

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

module.exports = {
     
     
  module: {
     
     
    rules: [
      {
     
     
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

提示：vue-loader 库同时提供用于处理 SFC 代码转译的 Loader 组件，与用于处理上下文兼容性的 Plugin 组件，两者需要同时配置才能正常运行。
经过 vue-loader 处理后，SFC 各个模块会被等价转译为普通 JavaScript 模块，例如：

可以看到，<template> 内容会被转译为用于构造 Virtual Dom 结构的 render 函数；<script> 标签导出的对象会被转译为 JavaScript 对象字面量形式。
注意，上例 Webpack 配置还无法处理 CSS 代码，若此时添加 <style> 模块将导致报错：

为此需要添加处理 CSS 的规则，完整配置：

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

module.exports = {
     
     
  module: {
     
     
    rules: [
      {
     
      test: /\.vue$/, use: ["vue-loader"] },
      {
     
     
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

同样的，<style> 模块也将被转译为 JavaScript 内容：

运行页面

上例接入的 vue-loader 使得 Webpack 能够正确理解、翻译 Vue SFC 文件的内容，接下来我们还需要让页面真正运行起来，这里会用到：
- 使用 html-webpack-plugin 自动生成 HTML 页面；
- 使用 webpack-dev-server 让页面真正运行起来，并具备热更新能力。
其中 html-webpack-plugin 是一款根据编译产物自动生成 HTML 文件的 Webpack 插件，借助这一插件我们无需手动维护产物数量、路径、hash 值更新等问题。使用时，首先安装依赖：$ yarn add -D html-webpack-plugin

其次，修改 Webpack 配置：

const path = require("path");
const {
     
      VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
     
     
  module: {
     
     
    rules: [
      {
     
      test: /\.vue$/, use: ["vue-loader"] }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
     
     
      templateContent: `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>
    `,
    }),
  ],
};