一个新手也能读懂的Webpack 5 文档笔记

前端

2023-09-10 12:04:45

Webpack 5：现代 Web 应用程序开发的强大工具

简介

Webpack 5 是一款模块化打包工具，旨在简化复杂 Web 应用程序的构建和管理。它允许你将多个模块（包括 JavaScript、CSS 和图像）打包到单个或多个文件中，从而便于部署和维护。

主要特性

Webpack 5 引入了众多新特性和改进，使其成为构建现代 Web 应用程序的绝佳工具。这些特性包括：

树形摇动： 删除未使用的代码，减小捆绑包大小。
分离代码： 将公共代码提取到单独的供应商包中，实现更快加载。
按需加载： 仅在需要时加载模块，提高性能。
资源管理： 轻松处理各种资产，包括 CSS、图像和字体。
HMR（热模块替换）： 无缝更新应用程序，无需刷新页面。

入门

安装 Webpack

yarn add webpack-cli -D

创建配置文件

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

添加 HTML 支持

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

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

资源管理

加载 CSS

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

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