Webpack 基础配置与自动构建

安装 Webpack 及相关依赖：

npm install webpack webpack-cli --save-dev

创建 webpack.config.js 配置文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

开发环境热更新配置

安装 webpack-dev-server：

npm install webpack-dev-server --save-dev

修改配置文件启用开发服务器：

module.exports = {
  // ...其他配置
  devServer: {
    static: './dist',
    hot: true,
    port: 8080
  }
};

加载器与插件系统

常用加载器配置示例：

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

生产环境优化

添加代码压缩和资源优化：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'all'
    }
  }
};

多环境配置管理

创建不同环境配置文件：

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map'
});

性能监控与分析

安装分析工具：

npm install webpack-bundle-analyzer --save-dev

配置打包分析：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

https://github.com/midtzc/wx4_dao9
https://github.com/trevortonh/rh9_f2x1
https://github.com/courtneymo/svh_xrh0
https://github.com/miladschul/z3g_n2g9
https://github.com/orrazarz/8rh_exo8