Webpack 是一个现代化的 模块打包工具，广泛用于前端项目中。它能够将多个文件打包为一个或多个文件，优化加载性能，并支持代码分割、懒加载等高级功能。以下是 Webpack 的核心知识点：

1. 核心概念 📌

  • 入口 (Entry)：指定打包的起点文件，通常为 main.js。
  • 输出 (Output)：定义打包后的文件存放路径和名称，例如 dist/main.js。
  • 加载器 (Loader)：处理非 JavaScript 文件（如 CSS、图片），例如 style-loader 和 css-loader。
  • 插件 (Plugin)：扩展 Webpack 功能，如 HtmlWebpackPlugin 生成 HTML 文件。
  • 模式 (Mode)：开发模式（development）和生产模式（production）的区别。

2. 使用步骤 🚀

  1. 初始化项目： 
    npm init -y
  2. 安装 Webpack： 
    npm install --save-dev webpack webpack-cli
  3. 创建 webpack.config.js 配置文件，指定入口、输出和加载器规则。
  4. 运行打包命令： 
    npx webpack

3. 配置文件示例 📄

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

4. 常见问题解答 ❓

  • Q: 如何热更新开发？
    A: 使用 webpack-dev-server 并开启 hotModuleReplacement。
  • Q: 如何优化打包体积？
    A: 配置 splitChunks 实现代码分割，并使用 TerserPlugin 压缩代码。

5. 扩展阅读 📘

Webpack_概念
模块打包工具