前言

vue 框架在前端开发中也是一个主流的框架了，其数据绑定，响应式的优化使得开发者可以较低成本地构建 web 应用。

但实际上，我们大多接触的只是 vue 的应用层面，对于其编译过程、响应式实现原理以及和打包工具的结合，其实在日常工作中我们是接触的比较少的。比如：

• vue 的编译时和运行时。
• vue 的响应式原理。
• vue 如何和 webpack / vite 打包工具进行联动，打造一个简易上手的开发环境。

以上其实在工作中，我们接触不到。因为框架或脚手架已经帮我们去进行了一层封装，我们不仔细去看的话，其实是一层黑盒。大多是停留在使用层面。

本文会讲解如用 webpack5 来搭建 vue 的开发环境。

思路

所以，我们主要要实现：

• webpack 如何识别 vue 文件, 识别后的 vue 文件具体是什么样子。
• vue 文件识别后的， webpack 还需要如何处理。
• vue 文件 + TS + 样式预处理器

具体实现

如何识别 Vue 文件

webpack 中，想要识别 vue 文件的话，我们采用的还是 vue-loader 来进行实现。

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为**单文件组件 (SFCs)**的格式撰写 Vue 组件

入口文件编写

首先，我们写一个 .vue 单文件。

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello, world!!!',
      arr: [],
    }
  },
  methods: {
    getAddArr(arr) {
      return arr.map(item => item + 102444);
    }
  }
}
</script>

入口文件进行引入

import { createApp } from 'vue';
import App from  './index.vue';

const app = createApp(App);

app.mount('#app');

入口文件引入了，那么我们继续去看看我们的 webpack 需要如何配置。

webpack 配置

我们只需要在 webpack 中配置好入口，已经将上述需要的 vue-loader 引入即可。

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

const entryFile = path.resolve(__dirname, './src/index.js');

module.exports = {
  mode: 'development',
  entry: entryFile,
  output: {
    //custom publicPath
    // publicPath: './',
    path: path.resolve(__dirname, './dist')
  },
  devServer: {
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

这个时候，我们打包看看效果，产物确实是打包出来了。页面也有对应的效果了。

不过这个时候，我们页面没有样式，我们加入点样式。

<template>

</template>

<script></script>

<style>
h2 {
  color: red;
}
</style>

发现，这个时候编译报错了。

从上述分析后，其实我们能看出来，这个一个 css 的报错，原因是我们没有对 css 文件去进行处理。

实际上， vue-loader 会将 css 代码提取成 css 文件。当然，其实他做了几件事：

1. vue-loader 首先会解析 Vue 单文件组件，分别提取出模板、脚本和样式等内容，并将它们封装成一个 JavaScript 对象。
2. 对于模板部分，vue-loader 会使用 Vue.js 提供的编译器将其转换为渲染函数，并将渲染函数封装成一个 JavaScript 模块。这个模块包含了渲染函数、静态渲染树和一些帮助函数等信息。
3. 对于脚本部分，vue-loader 会使用 Webpack 将其打包成一个 JavaScript 模块，并将其中的 export default 导出对象与 Vue 模板编译生成的渲染函数进行合并，形成最终的组件对象。
4. 对于样式部分，vue-loader 可以再使用 style-loader 和 css-loader 等 Webpack 加载器将其打包成一个 CSS 文件，并插入到 HTML 页面中。

所以，针对上述的报错，我们要做的是对识别后的产物来进行处理。

识别后的产物处理

从上面我们可以了解到， vue-loader 处理后，会生成以下类型文件。

• ts / js: 模板部分封装成渲染函数，脚本部分打包成 js / ts 模块。
• css: 样式部分文件的处理结果。
• pug: 对 pug 语法的支持。（本文会暂时跳过这部分）。

js 模块的处理

其实经过 vue-loader 处理过后，实质上会生成一个 js 文件，这里的 js 我们可以通过 module.rules 配置 /\.js$/ 配置对应的 loader 就可以了。

这里举个例子。

其实 vue-loader 处理后的 js, 在主流的浏览器也可以运行，但是有些场景下我们可能对 js 兼容性有所要求，这个时候可能会用到 babel-loader 进行处理, 将代码打包成 es6 以下的版本。

我们代码中有一段箭头函数，我们可以看配置前后的代码生成情况来对比。

我们修改下配置即可。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
    ]
  }
}

处理前

处理后

css 模块的处理

上方，我们讲到会生成 css 文件，那么我们直接配置下处理 css 文件的 loader 就可以了。

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
					'css-loader'
        ]
      },
    ]
  }
}

效果：

总结一下：对产物的处理，其实就是 webpack 中的 loader 配置，对特定的文件才用特定的 loader 配置即可。

结合其他处理器

上方，其实我们已经搭建了一个最基础的 vue 开发环境。

但是我们这里并没有支持 TypeScript 以及 less 预处理器。这里我们就具体来讲解下 。

支持 typescript

vue-loader 中支持在 <script> 标签声明 lang="ts" 来指定是使用 ts 语法，当然，处理过后，他会生成 ts 的文件。

那我们要支持 typescript 的语法，实质上就是配置下 ts 对应的 loader 即可，当然 vue-loader 的文档也给出了相关的配置示范。

修改下 index.vue

加入下 ts 的语法

<template></template>

<script lang="ts">
export default {
  data() {
    return {
      message: 'hello, world!!!',
      arr: [1],
    }
  },
  methods: {
    getAddArr(arr: number[]) {
      return arr.map(item => item + 102444);
    }
  }
}
</script>

修改 webpack 配置

直接根据配置示范来配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      },
    ]
  }
}

打包过后，看到 lang=ts 文件打包没报错就 ok 啦。

less 样式预处理器

这里配置也比较简单。

修改下 index.vue

加入下 less 的语法

<template></template>

<script lang="ts">

</script>

<style lang="less">
h2 {
  color: red;
}
</style>

修改 webpack 配置

直接根据配置示范来配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

效果：

总结

本文介绍了如何使用 webpack5 搭建 Vue 的开发环境。

首先讲解了如何识别 Vue 文件，包括使用 vue-loader 处理模板、脚本和样式等内容，并将它们封装成一个 JavaScript 对象。

然后讲解了如何处理识别后的产物，包括对 JavaScript 和 CSS 文件的处理。最后，介绍了如何结合其他处理器，例如 TypeScript 和 Less 预处理器。

这篇文章是一个最基础的环境搭建，实际上在开发中还有很多其他的配置需要去关注。但通过了解这些基础知识，可以更好地理解整个开发流程中的一些细节。

如果该文章能对你有点学习帮助，或者希望与笔者交流的话，欢迎关注下方的公众号，后续公众号也会持续更新前端领域相关的文章。