JavaScript webpack5怎么配置及使用

1. 什么是webpack？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

Webpack 的核心概念包括：

• 入口（Entry）：指定 webpack 应该使用哪个模块作为构建其内部依赖图的开始。
• 输出（Output）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
• 加载器（Loaders）：webpack 只能理解 JavaScript 和 JSON 文件。加载器允许 webpack 处理其他类型的文件，并将它们转换为有效的模块。
• 插件（Plugins）：插件可以用于执行范围更广的任务，如打包优化、资源管理和环境变量注入等。
• 模式（Mode）：通过选择 development、production 或 none 来设置不同的模式，以启用 webpack 内置的优化。

2. 安装webpack5

在开始配置 webpack5 之前，首先需要确保你已经安装了 Node.js 和 npm（Node.js 的包管理器）。如果你还没有安装，可以从 Node.js 官网 下载并安装。

2.1 初始化项目

首先，创建一个新的项目目录并初始化 npm：

mkdir my-webpack-project
cd my-webpack-project
npm init -y

这将创建一个 package.json 文件，其中包含项目的基本信息。

2.2 安装webpack

接下来，安装 webpack 和 webpack-cli（webpack 的命令行工具）：

npm install webpack webpack-cli --save-dev

安装完成后，你可以在 package.json 文件中看到 webpack 和 webpack-cli 已经被添加到 devDependencies 中。

3. 配置webpack5

3.1 创建webpack配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件。这个文件将包含 webpack 的配置。

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出目录
  },
  mode: 'development', // 开发模式
};

3.2 创建入口文件

在 src 目录下创建一个名为 index.js 的文件，作为 webpack 的入口文件。

// src/index.js
console.log('Hello, webpack!');

3.3 运行webpack

现在，你可以运行 webpack 来打包你的项目：

npx webpack

运行后，webpack 会根据配置文件将 src/index.js 打包到 dist/bundle.js 文件中。

4. 使用加载器（Loaders）

Webpack 默认只能处理 JavaScript 和 JSON 文件。为了处理其他类型的文件（如 CSS、图片等），我们需要使用加载器。

4.1 处理CSS文件

首先，安装 style-loader 和 css-loader：

npm install style-loader css-loader --save-dev

然后，在 webpack.config.js 中配置加载器：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

接下来，在 src 目录下创建一个 style.css 文件：

/* src/style.css */
body {
  background-color: lightblue;
}

最后，在 index.js 中引入这个 CSS 文件：

// src/index.js
import './style.css';
console.log('Hello, webpack!');

再次运行 npx webpack，webpack 会将 CSS 文件打包到 bundle.js 中，并在页面加载时应用这些样式。

4.2 处理图片文件

为了处理图片文件，我们需要安装 file-loader：

npm install file-loader --save-dev

然后，在 webpack.config.js 中配置加载器：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

接下来，在 src 目录下放置一张图片，并在 index.js 中引入：

// src/index.js
import './style.css';
import logo from './logo.png';

const img = new Image();
img.src = logo;
document.body.appendChild(img);

console.log('Hello, webpack!');

再次运行 npx webpack，webpack 会将图片文件打包到 dist 目录中，并在页面中显示这张图片。

5. 使用插件（Plugins）

Webpack 插件用于执行更广泛的任务，如打包优化、资源管理和环境变量注入等。

5.1 使用HtmlWebpackPlugin

HtmlWebpackPlugin 插件可以自动生成一个 HTML 文件，并将打包后的 JavaScript 文件自动插入到 HTML 中。

首先，安装 html-webpack-plugin：

npm install html-webpack-plugin --save-dev

然后，在 webpack.config.js 中配置插件：

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

module.exports = {
  // ... 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My Webpack Project',
    }),
  ],
};

再次运行 npx webpack，webpack 会在 dist 目录下生成一个 index.html 文件，并自动将 bundle.js 插入到 HTML 中。

5.2 使用CleanWebpackPlugin

CleanWebpackPlugin 插件可以在每次构建前清理 dist 目录，以确保每次构建都是全新的。

首先，安装 clean-webpack-plugin：

npm install clean-webpack-plugin --save-dev

然后，在 webpack.config.js 中配置插件：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My Webpack Project',
    }),
  ],
};

再次运行 npx webpack，webpack 会在每次构建前清理 dist 目录。

6. 使用开发服务器（DevServer）

Webpack 提供了一个开发服务器，可以在开发过程中实时重新加载页面。

首先，安装 webpack-dev-server：

npm install webpack-dev-server --save-dev

然后，在 webpack.config.js 中配置开发服务器：

module.exports = {
  // ... 其他配置
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

接下来，在 package.json 中添加一个启动开发服务器的脚本：

{
  "scripts": {
    "start": "webpack serve"
  }
}

现在，你可以通过以下命令启动开发服务器：

npm start

打开浏览器并访问 http://localhost:8080，你将看到你的应用程序正在运行，并且每次修改代码后，页面会自动重新加载。

7. 使用Babel

Babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转换为向后兼容的代码，以便在旧版浏览器中运行。

首先，安装 Babel 及其相关依赖：

npm install babel-loader @babel/core @babel/preset-env --save-dev

然后，在 webpack.config.js 中配置 Babel 加载器：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

接下来，在项目根目录下创建一个 .babelrc 文件，并配置 Babel：

{
  "presets": ["@babel/preset-env"]
}

现在，webpack 会使用 Babel 将现代 JavaScript 代码转换为向后兼容的代码。

8. 生产环境配置

在生产环境中，我们通常需要对代码进行优化，如压缩 JavaScript 和 CSS 文件、提取 CSS 文件等。

8.1 压缩JavaScript文件

Webpack 5 默认在生产模式下会自动压缩 JavaScript 文件。你只需要将 mode 设置为 production：

module.exports = {
  mode: 'production',
  // ... 其他配置
};

8.2 提取CSS文件

为了将 CSS 文件提取到单独的文件中，我们需要安装 mini-css-extract-plugin：

npm install mini-css-extract-plugin --save-dev

然后，在 webpack.config.js 中配置插件和加载器：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
};

再次运行 npx webpack，webpack 会将 CSS 文件提取到 dist/styles.css 中。

9. 总结

通过本文，你已经学会了如何配置和使用 webpack5 来打包 JavaScript 项目。我们介绍了 webpack 的核心概念、安装和配置 webpack、使用加载器和插件、配置开发服务器、使用 Babel 以及生产环境的优化配置。

Webpack 是一个非常强大的工具，虽然它的配置可能看起来有些复杂，但一旦掌握了基本概念，你就可以根据自己的需求灵活配置 webpack，以构建高效、优化的前端应用程序。

希望本文对你有所帮助，祝你在使用 webpack 的过程中取得成功！