这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

1. 概览

vite新一代前端构建工具，由两大组成部分：

1.No-bundle 开发服务，源文件无需打包

2.生产环境基于Rollup的Bundler

核心特征：

高性能，dev启动速度和热更新速度非常快！
简单易用，开发者体验好

vite集成了（开箱即用）：

webpack
webpack-dev-server
css-loader
style-loader
less-loader
sass-loader
postcss-loader
flie-loader
HTMLWebpackPlugin
...

webpack配置:

export default {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-typescript'],
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          process.env.NODE_ENV === 'production' ? MinCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              module: true,
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production' ? MinCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              moodule: true,
            },
          },
          'postcss-loader',
        ],
      },
    ],
  },
  plugins: [new MinCssExtractPlugin(), new HTMLWebpackPlugin()],
}

等价于 vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

官方文档：vite

2. 使用vite

2.1 开始

安装pnpm

npm i -g pnpm

初始化命令

pnpm create vite

安装依赖

pnpm install

启动项目

npm run dev

2.2 使用sass

安装sass

pnpm i sass -D

编写代码

import styles from './index.module.scss'
import { FC } from 'react'

export const Header: FC = ({}) => {
  return <p className={styles.header}>This is Header</p>
}

使用Header插件

import {Header} from './components/Header';
import logoUrl from './logo.svg'

function App(){
    return (
        <div>
            <Header/>
            <img src={logoUrl} alt=""/>
        </div>
}
export default App;