【Webpack 的核心应用场景】

Webpack 的核心应用场景

Webpack 是一个模块打包工具，适用于多种现代前端开发场景。以下分模块介绍其核心应用场景及配置方法。

单页应用（SPA）打包

SPA 通常依赖大量 JavaScript 模块和路由。Webpack 通过入口文件分析依赖图，打包所有资源。

配置 entry 指定主入口文件
使用 html-webpack-plugin 生成 HTML 模板
通过 splitChunks 拆分公共代码

javascript 复制代码

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' })
  ],
  optimization: {
    splitChunks: { chunks: 'all' }
  }
};

多页应用（MPA）处理

需要为每个页面单独配置入口和 HTML 模板。

设置多个 entry 键值对
为每个页面实例化 html-webpack-plugin

javascript 复制代码

entry: {
  page1: './src/page1.js',
  page2: './src/page2.js'
},
plugins: [
  new HtmlWebpackPlugin({ filename: 'page1.html', chunks: ['page1'] }),
  new HtmlWebpackPlugin({ filename: 'page2.html', chunks: ['page2'] })
]

静态资源处理

通过 loader 转换非 JS 资源：

file-loader 处理字体/图片
url-loader 内联小文件
css-loader + style-loader 处理 CSS

javascript 复制代码

module: {
  rules: [
    { test: /\.(png|svg)$/, use: ['file-loader'] },
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}

开发环境优化

webpack-dev-server 提供热更新
source-map 生成调试映射
HotModuleReplacementPlugin 实现模块热替换

javascript 复制代码

devServer: {
  contentBase: './dist',
  hot: true
},
devtool: 'eval-source-map'

生产环境优化

TerserPlugin 压缩 JS
MiniCssExtractPlugin 提取 CSS
PurgeCSSPlugin 移除未使用样式

javascript 复制代码

optimization: {
  minimizer: [new TerserPlugin()],
},
plugins: [
  new MiniCssExtractPlugin(),
  new PurgeCSSPlugin({ paths: glob.sync(`${PATHS.src}/**/*`)})
]

高级场景支持

微前端架构：

通过 ModuleFederationPlugin 实现应用间模块共享
配置 exposes 和 remotes 声明共享模块

SSR 支持：

使用 target: 'node' 编译 Node 端 bundle
通过 webpack-node-externals 排除 node_modules

TypeScript 集成：

ts-loader 或 babel-loader 转换 TS
配合 fork-ts-checker-webpack-plugin 进行类型检查

自定义扩展

通过编写 loader 和 plugin 实现定制化需求：

Loader：转换特定文件类型
Plugin：在编译生命周期注入逻辑

javascript 复制代码

// 自定义 plugin 示例
class LogPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('LogPlugin', stats => {
      console.log('编译完成');
    });
  }
}

性能调优手段

使用 cache-loader 缓存 loader 结果
配置 thread-loader 启用多线程构建
通过 DLLPlugin 预编译不常变动的库

javascript 复制代码

{
  test: /\.js$/,
  use: [
    { loader: 'thread-loader', options: { workers: 4 } },
    'babel-loader'
  ]
}

以上场景覆盖了从基础到高级的 Webpack 使用模式，实际项目中通常会组合多个配置方案。建议通过 webpack-merge 区分环境配置，保持代码可维护性。