Vite和Wabpack进行打包项目

问题：首先，咱们为什么要打包？

答案：打包（Packaging）是软件开发中的一个重要步骤，主要目的是将开发好的代码和依赖项打包成一个可分发和运行的格式。

关键原因：依赖管理、环境隔离、便于分发、版本控制、安全性、性能优化、部署简化

在不同的编程语言和框架中，打包工具和方法可能会有所不同。

        

技术栈	部分打包工具
TypeScript/JavaScrippt	Webpack、Rollup、Vite
Vue	Vue CLI、Vite、Webpack
React	Webpack、Vite

一、Vite打包

介绍：Vite是一个现代化的前端构建工具，专为现代JavaScript框架（如Vue.js、React等）设计。它在开发环境中使用原生ES模块和HTTP服务器，并在生产环境中使用Rollup进行打包。Vite的性能非常高，特别适合大型（SPA）单页应用。

        1、创建配置文件

在项目根目录中的vite.config.js文件中进行配置，如果是ts，那么就是在vite.config.ts文件中

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果使用 Vue.js

export default defineConfig({
  plugins: [vue()], // 根据框架选择插件
  build: {
    outDir: 'dist', // 打包输出目录
    sourcemap: true, // 生成 Source Maps
    rollupOptions: {
      input: {
        main: './index.html', // 入口文件
      },
    },
  },
});

        2、配置运行打包命令

在 package.json 中，Vite 通常会自动添加打包脚本。

"scripts": {
  "dev": "vite",        // 开发模式
  "build": "vite build", // 打包命令
  "serve": "vite preview" // 预览打包后的项目
}

        3、通过一下命令进行打包

npm run build

 

到此就Vite工具打包完成了，查看根目录下有没有多一个dist目录，里面就是生成的构建文件！！！

二、Webpack打包

介绍：Webpack是一个广泛使用的JavaScript模块打包工具，适用于前端项目。它可以将模块化的代码打包成可以在浏览器中运行的格式。

        1.配置Webpack

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

module.exports = {
  mode: 'development',
  entry: './src/main.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包输出目录
    filename: 'bundle.js', // 输出文件名
    publicPath: '/', // 配置公共路径
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 可省略的扩展名
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js', // Vue 的别名
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // 匹配 .vue 文件
        loader: 'vue-loader',
      },
      {
        test: /\.js$/, // 匹配 .js 文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/, // 匹配 .css 文件
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 匹配图片文件
        loader: 'file-loader',
        options: {
          name: '[name].[hash:8].[ext]', // 输出文件名格式
          outputPath: 'assets/', // 输出路径
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 指定内容路径
    compress: true,
    port: 9000, // 指定端口
    historyApiFallback: true, // 支持 HTML5 History API
  },
};

        2.添加打包的命令

"scripts": {
  "dev": "vite",        // 开发模式
  "build": "vite build", // 打包命令
  "serve": "vite preview" // 预览打包后的项目
}

        3.执行打包的命令

npm run build

到此就Webpack工具打包完成了，查看根目录下有没有多一个dist目录，里面就是生成的构建文件！！！

三、运行构建后的项目

为了查看打包后的项目，你可以使用一个简单的静态文件服务器，比如 serve等等

        1.安装 serve

npm install -g serve

        2.运行构建后的文件

在 dist 目录下运行 serve，请执行下列命令

serve -s dist

        3.访问项目

打开浏览器，访问 http://localhost:5000，默认端口是5000，终端也会有提示访问哪个链接的。