一、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"),}),],
};三、使用示例
資源引用
- 圖片、字體、文本等資源直接 import 即可，Webpack5 自動處理。
代碼分割
- 使用?
import()?實現懶加載和動態組件。
性能分析
- 運行?
npm run build?后自動彈出體積分析報告。
參考資料
- Webpack 官方文檔
- Webpack5 遷移指南
?Webpack5 新特性與詳細配置指南 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享
)
