⚡

Webpack技能Skill webpack

Webpack技能是前端开发中用于项目构建和优化的核心工具。它专注于JavaScript模块打包、代码分割、性能优化和现代前端架构（如微前端）的实现。通过配置加载器、插件和模块联邦，开发者可以高效管理项目依赖、减少打包体积、提升应用加载速度，并支持复杂应用的模块化开发和部署。关键词：Webpack配置、前端构建工具、模块打包、代码分割、性能优化、微前端、Module Federation、加载器、插件、打包优化。

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

名称: webpack 描述: Webpack配置、模块联邦、加载器、插件和优化。 允许工具: 读取、写入、编辑、Bash、Glob、Grep

Webpack 技能

提供Webpack配置和优化的专家级协助。

能力

  • 配置生产环境的webpack
  • 设置模块联邦
  • 创建自定义加载器/插件
  • 优化打包体积
  • 配置代码分割

配置示例

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      remotes: { shared: 'shared@http://localhost:3001/remoteEntry.js' },
    }),
  ],
};

目标流程

  • 构建优化
  • 微前端架构
  • 遗留系统迁移