webpack

1. 使用步骤

1. 初始化项目

npm init -y

2. 安装依赖 webpack, webpack-cli

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

npm i webpack webpack-cli -D

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

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

4. 构建 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'// },
}

1. 字符串

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

2. 数组

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

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

3. 对象

每个文件对应一个入口文件，生成多个文件 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 来处理这个文件类型

• 解决步骤：

1. 安装 css-loader 和 style-loader

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

2. 在 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},// 配置 loadermodule: {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 代码

• 使用步骤：

1. 安装 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

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

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

3. 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 文件

• 使用步骤：

1. 安装 html-webpack-plugin

npm i html-webpack-plugin -D

2. 在 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会优先于这个titletemplate: './public/index.html' // 模板文件})]
}

8. devServer 开发服务器

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

• 使用步骤：

1. 安装 webpack-dev-server

npm i webpack-dev-server -D

2. 运行命令 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：是一个映射文件，用于将打包后的文件映射到源代码文件，方便调试

• 使用步骤：

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

{devtool: 'inline-source-map'
}

vite

1. 简介

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

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

2. 打包时，采用 rollup 进行打包，这样可以提高打包效率

• 使用步骤：

1. 安装 vite

npm i vite -D

2. 根路径下创建 index.html 文件

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

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

vite 的源码目录就是根目录

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

import './style/index.css'const h1 = document.createElement('h1')
h1.innerText = 'hello webpack!!!'
document.body.appendChild(h1)console.log('hello webpack')

4. 开发模式启动 vite

npx vite

5. 命令

vite: 启动 vite 开发服务器

vite build: 打包 vite 项目

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

2. 配置文件

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

• 使用步骤：

1. 安装 @vitejs/plugin-legacy

用于兼容低版本的浏览器

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

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

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy({targets: ['defaults', 'IE 11']})]
})