webpack5入门配置

2026/9/21 4:30:19 拓冰建站浏览量

一、功能介绍

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

二、webpack的基本使用

在项目中安装依赖

npm i webpack webpack-cli -D

指定入口文件进行打包

在开发模式下打包

npx webpack ./src/main.js --mode=development

在开发生产模式下打包

npx webpack ./src/main.js --mode=production

文件输出

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

三、webpack的各项配置

在项目中使用webpack个性化配置时，需要在项目根目录新建文件webpack.config.js，


module.exports = {// 入口entry: "",// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

修改配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "dist"),// filename: 输出文件名filename: "main.js",clean: true, // 自动将上次打包目录资源清空},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "development", // 开发模式
};

运行命令：npx webpack

四、样式处理配置

1. css

安装依赖：npm i css-loader style-loader -D

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

2. less

安装依赖：npm i npm i less-loader -D

less-loader：负责将 Less 文件编译成 Css 文件

3. scss

安装依赖：npm i sass-loader sass -D

sass-loader：负责将 Sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

配置：

const path = require("path");
module.exports = {entry: "./src/main.js",output: {...},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},],},plugins: [],mode: "development",
};

注意：use 数组里面 Loader 执行顺序是从右到左

四、图片资源处理配置

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

配置如下：


const path = require("path");module.exports = {entry: "./src/main.js",output: {...},module: {rules: [...,{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",},],},plugins: [],mode: "development",
};

图片资源的优化：

...,
module: {rules: [...,{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",//解析过程中，小于10kb的图片会被base64处理parser: {dataUrlCondition: {maxSize: 10 * 1024}}},],},

四、字体图标资源处理配置

...,
module: {rules: [...,{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},],},

type: "asset/resource"和type: "asset"的区别：

type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

四、其他资源处理配置（视频、音频等）

就是在处理字体图标资源基础上增加其他文件类型，统一处理即可

...,
module: {rules: [...,{test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},],},

建站实战干货