当前位置：首页 > article >正文

构建工具-webpack和vite笔记

article 2024/11/4 17:11:06

webpack

1. 使用步骤

初始化项目

npm init -y

安装依赖 webpack, webpack-cli

webpack: 核心依赖
webpack-cli: 命令行工具

npm i webpack webpack-cli -D

在项目中创建 src 目录，在 src 目录中创建 index.js 文件

webpack 默认会打包 src 目录下的 index.js 文件，后面可以通过 webpack.config.js 文件来修改默认的打包文件

构建 src/index.js 文件

打包后的文件会被打包到 dist 目录下

npx webpack
npx webpack --mode development # 指定开发环境

在 package.json 文件中添加 scripts 字段

"scripts": {
    "dev": "webpack",
    "start": "webpack --mode development",
    "build": "webpack --mode production"
}

2. 配置文件

webpack.config.js：默认的配置文件(是在 node 中运行的，使用 commonjs 规范)

module.exports = {
  // 配置打包模式：development 开发模式 production 生产模式
  mode: 'development' // 和上面目录效果一样
}

3. entry

打包的入口文件，可以是一个字符串，也可以是一个数组，也可以是一个对象

module.exports = {
  // 配置打包模式：development 开发模式 production 生产模式
  mode: 'development',
  // 配置入口文件（默认是src/index.js）
  // entry: './src/index.js',
  entry: {
    index: ['./src/index.js', './src/main.js']
  }
  // entry: {
  //    index: './src/index.js',
  //    main: './src/main.js'
  // },
}

字符串

{
  "entry": "./src/index.js"
}

数组

将 index.js 和 main.js 多个文件打包到一个文件中

{
  index: ['./src/index.js', './src/main.js']
}

对象

每个文件对应一个入口文件，生成多个文件 dist/index.js 和 dist/main.js

{
  index: "./src/index.js",
  main: "./src/main.js",
}

4. output

path：打包后的文件路径
filename：打包后的文件名
clean：打包前清空打包目录

{
    output: {
        // 打包后的文件名
        // filename: '[name].js' // name 是占位符，会被 entry 中的 key 替换
        filename: '[name]-[hash].js', // hash 是占位符，会被一个随机的字符串替换
        // 打包后的文件路径
        path: path.resolve(__dirname, 'dist'),
        clean: true // 每次打包，自动清空打包目录
    }
}

5. loader

loader：用于对模块的源代码进行转换，可以将文件从不同的语言（如 JavaScript、CSS、LESS）转换为 JavaScript 模块，以便在浏览器中使用

只要进行源代码进行转换的都是 loader

例如：在 index.js 文件中引入 css 文件

import './style/index.css'

const h1 = document.createElement('h1')
h1.innerText = 'hello webpack'
document.body.appendChild(h1)

console.log('hello webpack')

执行 npx webpack 命令后，会报错，因为 webpack 只能打包 JavaScript 文件，不能打包 css 文件

ERROR in ./src/style/index.css 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> h1 {
|     color: #369;
|     font-family: Arial, Helvetica, sans-serif;
 @ ./src/index.js 1:0-26

上面的报错信息告诉我们，需要一个合适的 loader 来处理这个文件类型，目前没有配置 loader 来处理这个文件类型

解决步骤：

安装 css-loader 和 style-loader

# `css-loader`：将 `css` 文件转换为 `JavaScript` 模块
# `style-loader`：将 `css` 文件插入到 `head` 标签中
npm i css-loader style-loader -D

在 webpack.config.js 文件中添加 loader

配置 loader 是通过 module.rules 数组来配置的

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  // 配置 loader
  module: {
    rules: [
      {
        test: /\.css$/i, // 正则表达式，匹配.css 结尾的文件
        use: ['style-loader', 'css-loader'] // use 数组中的 loader 从右到左执行
      },
      {
        test: /\.(jpg|png|svg)$/i, // 图片类型文件，webpack默认支持，使用 type: asset/resource 类型的 loader 来处理
        type: 'asset/resource'
      }
    ]
  }
}

⚠️ 注意：use 数组中的 loader 从右到左执行，先执行 css-loader，再执行 style-loader

总结：webpack 只能打包 JavaScript 文件，如果想要打包其他类型文件，需要添加对应文件的 loader

6. loader -> babel

babel：是一个 JavaScript 编译器，将 ES6 代码转换为 ES5 代码。可以将 JavaScript 新特性转换可以兼容的旧版本的 JavaScript 代码

使用步骤：

安装 babel-loader 和 @babel/core 和 @babel/preset-env

babel-loader：将 babel 转换为 webpack 可以识别的 loader

@babel/core：babel 的核心库

@babel/preset-env：babel 的预设库，内置了一些常用的 babel 插件

npm i babel-loader @babel/core @babel/preset-env -D

在 webpack.config.js 文件中添加 loader

{
  test: /\.m?js$/i,
  exclude: /node_modules/, // 排除 node_modules 目录下的文件
  use: {
    loader: 'babel-loader', // 使用的 loader
    options: {
      presets: ['@babel/preset-env'] // 预设库
    }
  }
}

package.json 设置兼容性

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  // "browserslist": [
  //    "defaults" // 使用默认的浏览器列表
  // ]
}

7. plugin

plugin：用来扩展 webpack 的功能

7.1 `html-webpack-plugin`

作用：自动生成 html 文件，自动引入打包后的 js 文件

使用步骤：

安装 html-webpack-plugin

npm i html-webpack-plugin -D

在 webpack.config.js 文件中添加 plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  output: {
    clean: true
  },
  plugins: [
    // new HtmlWebpackPlugin(), // 自动生成 html 文件，自动引入打包后的 js 文件
    new HtmlWebpackPlugin({
      title: 'webpack app', // template的title会优先于这个title
      template: './public/index.html' // 模板文件
    })
  ]
}

8. devServer 开发服务器

devServer：是一个开发服务器，用于开发环境，它可以在内存中生成打包后的文件，不会在磁盘中生成打包后的文件，也不会在磁盘中生成 source-map 文件，它可以在浏览器中访问打包后的文件，也可以在浏览器中访问 source-map 文件

使用步骤：

安装 webpack-dev-server

npm i webpack-dev-server -D

运行命令 webpack serve

npx webpack serve
npx webpack serve --open --port 8080 # 自动打开浏览器，端口号为8080

也可以在 webpack.config.js 文件中添加 devServer

{
    devServer: {
        port: 3000,
        open: true
    }
}

9. source-map

source-map：是一个映射文件，用于将打包后的文件映射到源代码文件，方便调试

使用步骤：

在 webpack.config.js 文件中添加 devtool

{
  devtool: 'inline-source-map'
}

vite

1. 简介

vite 是一个构建工具，相较于 webpack，vite 采用了不同的运行方式：

开发时，并不对代码进行打包，而是直接采用 esm 模块的方式进行开发，这样可以提高开发效率
打包时，采用 rollup 进行打包，这样可以提高打包效率

使用步骤：

安装 vite

npm i vite -D

根路径下创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>vite</title>
  </head>
  <script
    defer
    type="module"
    src="./index.js"
  ></script>
  <body></body>
</html>

需要使用模块化的方式引入 index.js 文件，否则会报错

vite 的源码目录就是根目录

在 index.js 文件中引入 css 文件

import './style/index.css'

const h1 = document.createElement('h1')
h1.innerText = 'hello webpack!!!'
document.body.appendChild(h1)

console.log('hello webpack')

开发模式启动 vite

npx vite

命令

vite: 启动 vite 开发服务器

vite build: 打包 vite 项目

vite preview: 预览 vite 打包后的代码

2. 配置文件

vite.config.js：默认的配置文件，使用 esm 规范

使用步骤：

安装 @vitejs/plugin-legacy

用于兼容低版本的浏览器

npm i @vitejs/plugin-legacy -D
# 使用vite build时，需要安装terser，用于压缩代码，否则会报错
npm i terser -D

在根路径下创建 vite.config.js 文件

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'IE 11']
    })
  ]
})