Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它将应用程序中的每个文件视为一个模块，并通过配置规则来解析这些模块之间的依赖关系，最终将其打包成一个或多个浏览器可以执行的文件。

模块解析流程

入口(entry)定义了构建的第一步，Webpack 从这里开始解析依赖。

输出(output)指定输出文件的位置和名称。

加载器(loaders)用于转换各种类型的资源为模块，例如将 CSS 转换为 JavaScript 模块。

插件(plugins)执行更广泛的任务，如压缩代码、优化输出文件等。

模块加载过程详解

解析入口Webpack 从配置文件中定义的入口点开始处理。

模块图(Module Graph)构建通过递归遍历所有导入的模块，构建出整个应用的依赖关系图。

编译与转换使用加载器对不同类型的模块进行转换。

打包与输出将转换后的模块打包成最终的输出文件。

加载器详解

常见加载器

加载器执行顺序

Webpack 会从右到左，从下到上执行加载器。可以通过 use 配置项指定多个加载器。

插件系统

插件生命周期Webpack 在执行过程中会触发多个事件，插件可以通过监听这些事件来执行特定操作。

常用插件

代码示例

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

模块解析机制

解析算法Webpack 使用一种称为“解析算法”的方法来查找和解析模块。这个算法根据给定的模块路径和配置规则来确定实际的模块文件。

解析过程

模块标识符(Module Identifiers)

模块标识符：Webpack 为每个模块分配一个唯一的标识符，通常是一个字符串形式的路径。

模块标识符的作用

模块图(Module Graph)

模块图结构Webpack 构建的模块图是一个有向无环图 (DAG)，其中节点表示模块，边表示依赖关系。

模块图构建

模块加载与执行

模块加载

模块执行

缓存与持久化

缓存机制

配置缓存

代码分割(Code Splitting)

动态导入使用 import() 动态导入模块，实现按需加载。

import('./chunk.js').then((chunk) => {
  chunk.default();
});
SplitChunksPlugin

自动分割重复代码，减少冗余。

配置示例：

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 10000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 10,
    maxInitialRequests: 5,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

热更新(Hot Module Replacement, HMR)

HMR原理

配置HMR

开发服务器配置：

devServer: {
  hot: true
}
模块配置：
javascript
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['react-hot-loader/babel']
          }
        }
      }
    ]
  }
};

多页应用

多页应用配置每个页面有自己的入口点和输出文件。配置示例：

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

生产环境配置

压缩代码使用 TerserPlugin 压缩 JavaScript 代码。使用 MiniCssExtractPlugin 分离 CSS 文件。配置示例：

optimization: {
  minimizer: [
    new TerserPlugin(),
    new OptimizeCSSAssetsPlugin({})
  ]
}

环境变量使用 DefinePlugin 设置环境变量。配置示例：

plugins: [
  new DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  })
]

性能监控与优化

性能监控使用 webpack-bundle-analyzer 分析打包结果。配置示例：

plugins: [
  new BundleAnalyzerPlugin()
]

优化策略

高级主题

TypeScript支持使用 ts-loader 或 awesome-typescript-loader 支持 TypeScript。配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

React与Vue支持使用 react-hot-loader 和 vue-loader 支持 React 和 Vue。配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['react-hot-loader/babel']
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  }
};