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进行分割},},
};