Webpack 5 学习指南：基础应用篇

2024-01-31 03:48:05

前言

在 [上篇文章](Webpack 5 学习指南 - [1] 入门篇) 中，我们了解了 Webpack 的基本概念和安装流程。在这篇基础应用篇中，我们将深入探讨 Webpack 的实际应用，包括如何配置 Webpack、使用加载器和插件、优化构建性能以及实现代码分割和热模块替换。

Webpack 配置

Webpack 的配置通过一个名为 webpack.config.js 的 JavaScript 文件完成。这个文件指定了 Webpack 如何处理你的代码，包括入口文件、输出目录、加载器、插件等。

一个基本的 webpack.config.js 文件如下所示：

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

加载器和插件

加载器和插件是 Webpack 强大的扩展机制，允许你定制构建过程。

加载器用于处理不同的文件类型，例如将 ES6 代码转换成 ES5 代码，或将 CSS 文件提取到单独的文件中。一些常用的加载器包括：

babel-loader
css-loader
style-loader

插件用于执行更复杂的任務，例如代码优化、代码分割或热模块替换。一些常用的插件包括：

UglifyJsPlugin
CommonsChunkPlugin
HotModuleReplacementPlugin

优化构建性能

Webpack 提供了多种方法来优化构建性能，包括：

代码分割：将大型应用程序拆分为更小的代码块，按需加载。
热模块替换：在不重新加载整个页面的情况下更新更改，从而提高开发效率。
缓存：缓存构建结果，以加快后续构建速度。
并行构建：利用多核 CPU 并行构建代码，缩短构建时间。

实际应用案例

让我们通过一个实际的例子来了解如何使用 Webpack。我们创建一个简单的 React 应用程序：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello Webpack!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

然后，创建一个 webpack.config.js 文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};