理解并配置 Webpack—— 入门篇-JavaScript中文网-JavaScript教程资源分享门户

前端开发离不开工程化构建，其中，Webpack 作为目前最流行的打包工具之一，有着重要的地位。Webpack 可以将一些大型的 Web 应用程序的开发流程自动化，帮助开发者快速搭建前端工程化开发环境，提高效率，本文就从入门的角度出发，介绍如何理解并配置 Webpack。

什么是 Webpack

Webpack（读音：[ˈwɛbpæk]）是一个开源的前端工具，可以将多个资源文件进行打包，主要用于处理 JavaScript 应用程序的构建打包工作，但也可用于处理 HTML、CSS 和图像等静态文件。

Webpack 本身是基于 Node.js 的构建工具，使用时需要先安装 Node.js。Webpack 的主要特点是可以将多个不同的文件，如 js、css、html 等组合成更少量的几个资源文件。这样，我们即可实现资源文件的分离和管理。

Webpack 的核心思想

Webpack 的设计思想是“一切皆模块”，将所有的文件（包括 js、css、图片等）都可以视为一个个模块，通过加载器（Loader）和插件（Plugin）对每一个模块进行处理，最终生成应用所需的几个打包文件。

Webpack 的核心功能包括以下步骤：

解析入口文件，获取所有依赖的其他模块；
根据所有模块信息，生成依赖关系图谱；
以入口文件为起点，将所有依赖文件打包进一个或多个 Bundle 文件中；
根据 Bundle 文件，生成最终的静态资源（JavaScript 脚本、CSS 样式、图片等和 Web 应用相关的文件）。

需要说明的一点是，Webpack 运行于 Node.js 之上，模块化方案遵循 CommonJS 规范。

Webpack 的常用命令

在使用 Webpack 进行打包时，我们需要熟悉一些常用的命令：

初始化项目：npm init 或 npm init -y
全局安装 Webpack：npm install -g webpack webpack-cli
在项目中安装 Webpack：npm install webpack webpack-cli --save-dev
运行 Webpack：webpack（如果打包出错可以添加参数：--display-error-details）
Webpack 快捷方式命令：npm run wp（在 package.json 中配置）

Webpack 的常用配置文件

Webpack 的常见配置文件为 webpack.config.js，Webpack 也支持通过命令行参数和 API 进行配置，不过通常我们都是通过配置文件进行配置。

下面是一个简单的 webpack.config.js 配置文件示例：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },
};

其中，entry 为入口文件路径，output 配置了输出文件路径和文件名，一般来说，entry 都是一个单独的 js 文件，而输出的是一个或多个打包后的 js 文件。

最后，我们需要在项目的根目录下创建 src 和 dist 两个文件夹，将 index.js 放在 src 文件夹中。

Webpack 的 Loader 和 Plugin

Loader：用于对模块的源代码进行转换，负责将一些非 JavaScript 代码转化为 Webpack 可以理解的 JavaScript 代码，例如将 Sass、Less、CoffeeScript 等文件转换成纯 JavaScript 代码，从而可以被打包。
Plugin：在 Webpack 打包构建的过程中，生命周期中的每个阶段，都会广播出一些事件，Plugin 可以监听这些事件的发生，并执行自定义的行为。

常见的 Loader

babel-loader：将 ES6、TypeScript、JSX 等代码转换成 ES5 代码（需要配合 @babel/core 和对应的插件使用）；
css-loader：通过 import 语法找到 CSS 文件，然后转化成 CommonJS 模块供 Webpack 使用；
sass-loader：将 Sass 代码编译成 CSS 代码；
style-loader：将 CSS 代码通过 JavaScript 动态地添加到 HTML 的 head 中。

常见的 Plugin

html-webpack-plugin：帮助我们在打包完成后，自动将 JavaScript 和 CSS 写入到 html 模板中，并生成最终的 HTML 文件；
uglifyjs-webpack-plugin：压缩打包后的 JavaScript 代码等，提高 Web 应用的加载速度；
clean-webpack-plugin：在每次打包前，自动清除输出文件夹中的文件。

Loader 和 Plugin 的配置

在 webpack.config.js 文件中，可以通过以下方式来配置 Loader 和 Plugin：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "Webpack Demo",
      template: "./src/index.html",
    }),
  ],
};

上述示例代码中，分别列出了常见的 babel-loader、css-loader 和 file-loader，并设置了 CleanWebpackPlugin 和 HtmlWebpackPlugin。

总结

Webpack 是 Web 前端开发中必不可少的一个构建工具。本文从入门的角度出发，介绍了 Webpack 的核心思想、常用命令、常用配置文件、Loader 和 Plugin 的使用方法，希望能对初学者带来一些指导和启发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534aebb7d4982a6eb9b4c48