webpack 5 入门之旅（一）：安装与初始体验

## 安装 webpack 5

webpack 5 可以通过 npm 或 yarn 安装。使用 npm 安装：

```bash
npm install webpack-cli -D

使用 yarn 安装：

yarn add webpack-cli -D

创建 webpack 配置文件

webpack 的配置通常存储在名为 webpack.config.js 的文件中。在这个文件中，你可以定义 webpack 的各种选项，比如入口文件、输出目录、加载器等等。

以下是一个简单的 webpack 配置文件示例：

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'main.js',
  },
};

运行 webpack

要运行 webpack，你可以使用以下命令：

npx webpack

使用 webpack 打包全局依赖

webpack 可以通过 externals 选项来打包全局依赖。例如，如果你想打包 jQuery，你可以这样配置 webpack：

module.exports = {
  externals: {
    jquery: 'jQuery',
  },
};

这样，webpack 就会把 jQuery 作为全局变量打包到你的应用程序中。

使用 webpack 打包本地依赖

webpack 可以通过 resolve.modules 选项来打包本地依赖。例如，如果你想打包 src/components 目录下的所有 JavaScript 文件，你可以这样配置 webpack：

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname, 'src/components'),
    ],
  },
};

这样，webpack 就会把 src/components 目录下的所有 JavaScript 文件打包到你的应用程序中。

总结

在这篇文章中，我们介绍了如何安装和使用 webpack 5，并通过一个简单的示例来演示 webpack 的基本用法。webpack 是一个非常强大的工具，可以帮助你构建复杂的 JavaScript 应用程序。