「李立超」前端构建工具（webpack&vite）教程

📅 2025-06-17

构建工具简介

当我们习惯了在node中编写代码的方式后，在回到前端编写html、css、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题。

我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。

构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

webpack介绍

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

使用步骤

初始化项目：npm init -y 安装依赖 webpack webpack-cli ：npm install webpack webpack-cli -D, -D表示设置为开发依赖 在项目中创建src目录，然后编写代码（index.js） 执行 npx webpack来对代码进行打包（打包后观察 dist 目录）

配置文件

mode

告知 webpack 使用相应模式的内置优化

none：不使用任何默认优化选项

production：生产模式

development：开发模式

entry

默认值是 ./src/index.js（一般不改，约定优于配置）

单个入口用路径字符串，多个传数组，对象写法分别命名打包。

entry: "./hello/hello.js", // 用来指定打包时的主文件 默认 ./src/index.js
entry: ["./src/a.js", "./src/b.js"],
entry: {
    a-js: "./src/a.js",
    b-js: "./src/b.js"
},

output

output: {
    path: path.resolve(__dirname, "dist"), // 指定打包的目录，必须要绝对路径
    filename: "main.js", // 打包后的文件名，可以使用占位符：filename:"[name]-[id]-[hash].js",
    clean: true // 自动清理打包目录
},

filename 默认值是 main.js，多个入口 entry 的情况，使用占位符(substitutions) 来确保每个文件具有唯一的名称 filename: [name]-[id]-[hash].js

clean: true 自动清理打包目录（path指定的目录），只保留当前这次打包的文件

path 指定打包目录，必须要绝对路径，一般会使用Node.js中的path模块来操作文件路径

const path = require('path'); //引入path模块
path.resolve(__dirname, "dist")   //表示当前目录下的dist文件夹

module（loader）

webpack默认只能处理js文件，为了实现工程化管理所有资源，就产生了loader，将js以外的资源转换为有效模块，以供应用程序使用。

使用步骤：安装对应loader -> 配置 -> import导入资源

配置项：

test 属性：识别出哪些文件需要被转换（使用正则表达式/\.css$/i）

use 属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象），loader 执行顺序为从后向前执行，因此 use 的数组顺序不能调换。

type 属性：加载资源文件

exclude 属性：不需要转换的文件夹（正则表达式）

module.exports = {
  module: {
    rules: [
      //注意是数组
      {
        test: /\.css$/i, //注意不是字符串
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpgpnggif)$/i, 
        type: "asset/resource" 
      },
    ],
  },
};

css

//1.安装
npm install css-loader style-loader -D

//2.配置
//css-loader 只负责打包，style-loader 负责渲染生效
{ test: /\.css$/i, use: ['style-loader','css-loader'] }

//3.导入资源
// index.js
//直接将css引入到js中
import "./style/index.css"

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader，有 4 种模式：

  • asset/resource 发送一个单独的文件并导出 URL。
  • asset/inline 导出一个资源的 data URI。
  • asset/source 导出资源的源代码。
  • asset 在导出一个 data URI（inline）和发送一个单独的文件（resource）之间自动选择。
//webpack.config.js
module.exports = {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.(pngjpg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.ico$/i,
        type: "asset/inline",
      },
      {
        test: /\.txt$/i,
        type: "asset",
      },
    ],
  },
};

//index.js
import png from "./1.png";
import ico from "./1.ico";
import txt from "./1.txt";

document.body.insertAdjacentHTML("beforeend", `<img src="${png}">`);
document.body.insertAdjacentHTML("beforeend", `<img src="${ico}">`);
document.body.insertAdjacentHTML("beforeend", `<div>${txt}</div>`);

babel

// 1.安装
npm install -D babel-loader @babel/core @babel/preset-env

// 2.配置
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modulesbower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
  ];
}

babel-loader：连接webpack和babel的中间件

@babel/core：babel的转换核心

@babel/preset-env：预设环境

babel 转换依据来自package.json中设置的兼容列表

"browserslist": [
    "defaults"
]

配置参考：https://github.com/browserslist/browserslist

plugin

插件用来为webpack扩展功能，与 loader 区别在于，插件不改变代码本身，用来解决 loader 无法实现的其他事，Webpack 提供很多开箱即用的插件。

html-webpack-plugin是一个常用插件，这个插件可以在打包代码后，自动在打包目录生成html页面。

// 1.安装
npm install html-webpack-plugin -D

// 2.引入依赖
const HTMLPlugin = require("html-webpack-plugin")

// 3.配置插件
plugins: [
    new HTMLPlugin({
        title: "Hello Webpack",   //设置title
        template: "./src/index.html"  //模板，自动引入script脚本
    })
]

devtool

devtool:"inline-source-map" 配置源码的映射，方便调试打包后的代码。

开发服务器（webpack-dev-server）

执行 npx webpack –watch可以实现代码发生变化时自动更新打包。

webpack-dev-server 可以实现起一个服务器来调试代码

// 安装
npm install webpack-dev-server -D

// 启动
npx webpack serve --open（--open表示启动服务器后自动打开）

Vite

概念

Vite也是前端的构建工具，相较于webpack，Vite采用了不同的运行方式：

开发时，并不对代码打包，而是直接采用 ESM（ES模块） 的方式来运行项目，在项目部署时，再对项目进行打包，除了速度外，Vite使用起来也更加方便，开箱即用，都配置好了。

本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。

ESM 必须通过 url 加载页面（即需要通过服务器运行）

使用

安装

Vite npm install vite -D

Vite 的源码目录默认就是项目根目录

在页面中引入 js 文件的时候要指定 type="module",修改路径直接在 script 标签中修改 src 属性正确即可（webpack需要配置）.

开发命令

vite 启动开发服务器

vite build 打包代码

vite preview 预览打包后代码

使用命令构建项目：

npm create vite@latest #使用 NPM

Vanilla 表示原生JS开发项目

使用插件

安装插件：npm install -D @vitejs/plugin-legacy

@vitejs/plugin-legacy：兼容传统浏览器的语法转换插件

配置文件：vite.config.js

// vite.config.js
import legacy from '@vitejs/plugin-legacy'    //引入插件
import { defineConfig } from 'vite'   //语法提示（可选）
export default defineConfig({   //写上defineConfig配置时会有提示
  plugins: [    //配置插件
    legacy({
      targets: ['defaults', 'IE 11'],   //配置兼容版本
    }),
  ],
})

需要使用ES6的模块化（export default）去暴露文件（区别于 webpack 使用require）