webpack 5 + Vue 3：强强联合，筑就前端新篇章

2023-11-03 08:40:25

webpack 5 引领潮流，配置 webpack 5 + Vue 3 尽享丝滑体验

前言

webpack 5 是一个用于构建前端应用程序的现代模块打包工具，它具有强大的功能和灵活的配置选项，可以满足不同项目的各种需求。Vue 3 是一个渐进式的 JavaScript 框架，它具有许多新特性和改进，可以帮助开发人员轻松构建复杂的前端应用程序。

webpack 5 和 Vue 3 的组合可以提供更快速、更稳定的构建体验。webpack 5 中的新功能，例如缓存和并行构建，可以显著提高构建速度。Vue 3 的新特性，例如 composition API 和 TypeScript 支持，可以简化开发流程并提高代码质量。

配置步骤

以下是对 webpack 5 + Vue 3 项目的配置步骤：

安装依赖项

npm install webpack webpack-cli vue vue-loader @vue/compiler-sfc terser-webpack-plugin

创建配置文件

在项目根目录中创建一个名为 webpack.config.js 的文件，并输入以下内容：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new TerserPlugin(),
  ],
};

运行构建命令

npm run build

示例代码

以下是一个使用 webpack 5 + Vue 3 构建的简单示例：

// src/main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

<!-- src/App.vue -->

<template>
  <h1>Hello, webpack 5 + Vue 3!</h1>
</template>

<script>
export default {
  name: 'App',
};
</script>

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