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

Webpack5 新特性与详细配置指南

news 2025/7/18 7:09:34

一、Webpack5 新特性

内置 Asset Modules（资源模块）

替代 file-loader、url-loader、raw-loader 等，统一资源处理方式。
四种类型：
asset/resource：导出文件 URL（等同 file-loader）。
asset/inline：导出 DataURL（等同 url-loader）。
asset/source：导出源码（等同 raw-loader）。
asset：自动选择 resource 或 inline（默认 8KB 分界）。

持久化缓存（Persistent Caching）

新增 cache: { type: 'filesystem' }，极大提升二次构建速度。

Tree Shaking 更彻底

默认生产模式下更智能地移除无用代码。

Module Federation（模块联邦）

支持多个独立构建的应用共享模块，实现微前端架构。

更快的构建性能

优化了编译流程，支持多进程/多实例（如 thread-loader）。

移除 Node.js Polyfills

不再自动为 Node.js 内置模块做 polyfill，需手动引入。

更智能的默认配置

如 production/development 模式下的优化、缓存、分包等。

更好的资源指纹

支持 chunkhash、contenthash、hash，便于缓存管理。

二、详细配置

基础配置

// webpack.config.js
const path = require("path");module.exports = {mode: "production", // 或 'development'entry: {index: "./src/index.js",},output: {path: path.join(__dirname, "dist"),filename: "[name].js",},
};

资源模块（Asset Modules）

module.exports = {module: {rules: [{test: /\.(jpg|jpeg|png|gif|svg)$/i,type: "asset",generator: {filename: "images/[hash][ext][query]",},},{test: /\.(ttf|eot|woff|woff2|otf)$/i,type: "asset/resource",generator: {filename: "fonts/[hash][ext][query]",},},{test: /\.txt$/,type: "asset",generator: {filename: "files/[hash][ext][query]",},parser: {dataUrlCondition: {maxSize: 4 * 1024, // 4kb},},},],},
};

CSS/LESS/PostCSS 配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader",],},],},plugins: [new MiniCssExtractPlugin({filename: "[name]_[contenthash:8].css",}),],
};

PostCSS 配置（postcss.config.js）

module.exports = {plugins: [require("autoprefixer"),// 可选：cssnext、purgecss 等],
};

代码分割与动态 import

// 安装插件
// npm i -D @babel/plugin-syntax-dynamic-import// .babelrc
{"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

动态 import 示例：

methods: {dynamicImportFn() {import('./Dynamic.vue').then(component => {this.dynamicComponent = component.default;});}
}

缓存与构建优化

module.exports = {cache: {type: "filesystem",buildDependencies: {config: [__filename],},version: "1.0",},
};

多进程/多实例

module.exports = {module: {rules: [{test: /\.js$/,use: [{loader: "thread-loader",options: { workers: 2 },},"babel-loader",],},],},
};

体积分析与速度分析

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin =require("webpack-bundle-analyzer").BundleAnalyzerPlugin;const smp = new SpeedMeasurePlugin();module.exports = smp.wrap({// ...webpack 配置plugins: [new BundleAnalyzerPlugin()],
});

生产环境优化

JS 压缩：内置 TerserPlugin
CSS 压缩：css-minimizer-webpack-plugin

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {optimization: {minimize: true,minimizer: [new CssMinimizerPlugin({ parallel: true })],},
};

DLL 预编译

// webpack.dll.js
const path = require("path");
const webpack = require("webpack");module.exports = {mode: "production",entry: ["vue"],output: {path: path.resolve(process.cwd(), "dll"),filename: "vendor.js",library: "dllExample",},plugins: [new webpack.DllPlugin({name: "dllExample",path: path.resolve(process.cwd(), "dll/manifest.json"),}),],
};