Webpack 核心配置详解

Webpack 是现代前端开发中不可或缺的模块打包工具，其核心在于配置文件的灵活性。以下从关键配置项出发，提供高效打包方案。

入口与输出配置

入口文件是打包的起点，支持单入口或多入口形式：

entry: {
  main: './src/index.js',
  vendor: './src/vendor.js'
}

输出配置需指定文件名和路径，支持内容哈希实现缓存：

output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
  clean: true
}

加载器与模块处理

通过加载器处理非JS资源，常见配置包括：

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

插件系统应用

插件扩展Webpack功能，典型插件配置示例：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new MiniCssExtractPlugin()
]

开发环境优化

开发模式下启用source map和热更新：

devtool: 'inline-source-map',
devServer: {
  static: './dist',
  hot: true
}

生产环境优化

生产环境需启用代码压缩和分包策略：

optimization: {
  minimize: true,
  splitChunks: {
    chunks: 'all'
  }
}

高级配置技巧

代码分割策略

通过动态导入实现按需加载：

import(/* webpackChunkName: "module" */ './module.js')

环境变量管理

使用cross-env管理不同环境变量：

const isProd = process.env.NODE_ENV === 'production'

自定义插件开发

实现简单的文件列表插件：

class FileListPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('FileListPlugin', compilation => {
      let filelist = 'Files:\n'
      for (const file in compilation.assets) {
        filelist += `- ${file}\n`
      }
      compilation.assets['filelist.md'] = {
        source: () => filelist,
        size: () => filelist.length
      }
    })
  }
}

性能优化方案

构建速度提升

配置缓存和并行处理：

cache: {
  type: 'filesystem'
},
module: {
  rules: [
    {
      test: /\.js$/,
      use: 'thread-loader'
    }
  ]
}

输出体积优化

启用Tree Shaking和Gzip压缩：

optimization: {
  usedExports: true,
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin()
  ]
}

长期缓存策略

通过runtime分离和稳定moduleId实现：

optimization: {
  runtimeChunk: 'single',
  moduleIds: 'deterministic'
}

通过合理配置这些核心功能，可以构建出高性能、可维护的前端应用打包方案。实际项目中应根据具体需求调整配置参数，持续监控构建指标进行优化迭代。