Webpack 核心概念

Webpack 是一个现代 JavaScript 应用程序的模块打包工具，它的核心概念包括以下几个：

1. 入口 (Entry)

入口点是Webpack构建其依赖图的起点。可以指定一个或多个入口点，Webpack会从这些入口点开始，递归地解析所有依赖的模块。入口点可以是JavaScript文件、JSON文件或其他Webpack支持的文件类型。

示例代码：

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: './src/vendor.js'
  },
};

2. 输出 (Output)

输出选项指定了Webpack如何以及在哪里输出它所创建的bundles，以及如何命名这些文件。输出文件的路径可以是绝对路径或相对于配置文件的路径。

示例代码：

module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 使用文件名和内容哈希
    path: path.resolve(__dirname, 'dist'), // 输出目录
    publicPath: '/', // 用于生成静态资源的URL路径
    clean: true // 每次构建前清理输出目录
  },
};

3. 加载器 (Loaders)

加载器用于处理Webpack无法直接处理的文件类型（如CSS、图片、字体等）。通过使用加载器，Webpack可以将这些文件转换为JavaScript模块，从而可以在打包过程中处理它们。

示例代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // 处理CSS文件
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader', // 处理图片文件
            options: {
              name: 'assets/[name].[ext]', // 输出文件名
            },
          },
        ],
      },
    ],
  },
};

4. 插件 (Plugins)

插件用于执行范围更广的任务，包括打包优化、资源管理和注入环境变量等。插件可以扩展Webpack的功能，使其更加强大和灵活。

示例代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
};

5. 模式 (Mode)

模式选项用于设置Webpack内置的优化。Webpack提供了三种模式：development、production和none。每种模式都有不同的优化策略。

示例代码：

module.exports = {
  mode: 'production', // 生产模式
};

6. 模块 (Modules)

在Webpack中，一切文件都是模块。模块是Webpack的基本构建块，通过入口文件开始，并通过一系列的导入或加载请求来进行模块间的连接。

示例代码：

// src/index.js
import './style.css';
import logo from './logo.png';

console.log(logo);

7. 依赖图 (Dependency Graph)

Webpack通过解析入口点和所有依赖模块，生成一个依赖图。这个图描述了所有模块之间的依赖关系，Webpack根据这个图来打包最终的bundle。

8. 热模块替换 (HMR)

HMR允许在开发过程中实时更新模块，而无需刷新整个页面。这对于提高开发效率非常有帮助。

示例代码：

module.exports = {
  devServer: {
    hot: true, // 启用HMR
  },
};

9. 代码分割 (Code Splitting)

代码分割可以将代码拆分成多个chunk，从而减少初始加载时间。Webpack可以根据依赖关系自动进行代码分割，也可以手动进行代码分割。

示例代码：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 所有chunk进行分割
    },
  },
};