EnlightenCode

Appearance

📦 Webpack 5 基础配置详解 ​

📑 目录 ​

🎯 webpack概念与核心功能 ​

Webpack 是现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将项目中所需的每一个模块组合成一个或多个 bundles。

核心概念 ​

  • Entry: 入口起点,指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始
  • Output: 输出结果,告诉 webpack 在哪里输出它所创建的 bundle
  • Loader: 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块
  • Plugin: 插件则可以用于执行范围更广的任务,从打包优化到资源管理
  • Mode: 模式配置(development/production),启用相应模式下的优化

🛠 项目初始化配置 ​

1. 创建项目并初始化 ​

bash
mkdir webpack-demo
cd webpack-demo
npm init -y

2. 安装webpack相关依赖 ​

bash
npm install webpack webpack-cli --save-dev

3. 基础配置文件 ​

js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // webpack 5 内置清理功能
  },
  mode: 'development'
};

📦 加载器(Loader)配置 ​

CSS处理 ​

bash
npm install css-loader style-loader postcss-loader postcss postcss-preset-env --save-dev
js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

资源模块处理 ​

Webpack 5 内置了资源模块(Asset Modules),无需额外的 loader:

js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        },
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
    ],
  },
};

🔌 插件(Plugin)配置 ​

HTML生成插件 ​

bash
npm install html-webpack-plugin --save-dev
js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'Webpack App'
    }),
  ],
};

CSS提取插件 ​

bash
npm install mini-css-extract-plugin --save-dev
js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

🚀 开发服务器配置 ​

bash
npm install webpack-dev-server --save-dev
js
module.exports = {
  // ...
  devServer: {
    static: './dist',
    hot: true,
    open: true,
    port: 8080,
    compress: true,
  },
};

📚 多页面打包配置 ​

js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/pages/home/index.js',
    about: './src/pages/about/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/pages/home/index.html',
      filename: 'home.html',
      chunks: ['home'],
    }),
    new HtmlWebpackPlugin({
      template: './src/pages/about/index.html',
      filename: 'about.html',
      chunks: ['about'],
    }),
  ],
};

🚀 性能优化建议 ​

1. 开启缓存 ​

js
module.exports = {
  // ...
  cache: {
    type: 'filesystem',
  },
};

2. 代码分割 ​

js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

3. Tree Shaking ​

js
module.exports = {
  mode: 'production', // 生产模式自动启用
  optimization: {
    usedExports: true,
  },
};

📝 注意事项 ​

  1. 确保 Node.js 版本 >= 14.0.0
  2. webpack 5 对 package.json 中的 type: "module" 支持更好
  3. 开发环境建议使用 source map 便于调试
  4. 生产环境注意开启代码压缩和优化选项

🎉 总结 ​

本文介绍了 Webpack 5 的基础配置,包括:

  • 基本概念和核心功能
  • loader 和 plugin 的配置
  • 开发服务器设置
  • 多页面应用配置
  • 性能优化方案

💡 提示: webpack 5 的配置比之前版本更加简洁,内置了许多原本需要第三方插件才能实现的功能。建议经常查看官方文档获取最新特性。