2024 年最新前端工程师使用 Webpack 模块打包工具详细教程（更新中）

概述 Webpack 模块打包工具

Webpack 是一个现代的静态模块打包工具，用于将前端应用程序的各种资源（例如如：JavaScript、CSS、图片等）视为模块，并将它们打包成可以在浏览器中运行的静态文件。它的主要功能包括模块打包、资源优化、代码分割、加载器转换等。

Webpack 官方网址：https://webpack.js.org/

Webpack 在内部会构建一个依赖图（dependency graph），这个依赖图映射到项目所需的每个模块，并生成一个或多个 bundle。在打包过程中，Webpack 可以进行各种优化，如代码压缩、文件合并、按需加载等，以提高应用程序的性能和加载速度。

Webpack 的配置包括入口（entry）、出口（output）、加载器（loader）和插件（plugins）。入口决定了 Webpack 从哪个模块开始生成依赖关系图，而出口则指定了生成的静态文件的输出目录。加载器用于转换不同类型的模块，以便能够被打包和引用，而插件则用于执行更广泛的任务，如代码分割、资源优化、生成 HTML 文件等。

为了进一步提高 Webpack 的打包速度，可以使用一些优化技巧，如使用线程加载器（例如：thread-loader）来启用多线程打包，或者使用缓存加载器来缓存已经编译过的文件，从而避免重复编译。总的来说，Webpack是一个强大而灵活的工具，能够帮助开发者更高效地构建和优化前端应用程序。

下载安装 Webpack 环境

安装 Node.js 环境

访问 Node.js 官网，下载并安装适合你操作系统的Node.js版本。安装完成后，你可以在命令行中运行 node -v 来检查 Node.js 是否安装成功，以及安装的版本。

初始化项目

在你的项目文件夹中，打开命令行窗口，并输入 npm init 来初始化一个新的 npm 项目。这会创建一个 package.json 文件，这个文件会保存你的项目依赖和其他配置信息。

全局安装 webpack webpack-cli

NPM 进行全局安装 webpack webpack-cli

npm install webpack webpack-cli -g

全局安装意味着你可以在任何地方使用 webpack 和 webpack-cli 命令。然而对于大多数项目，推荐进行局部安装，以避免不同项目之间的版本冲突。

局部安装 webpack webpack-cli

如果你选择局部安装在项目的根目录下运行如下：

npm install webpack webpack-cli --save-dev

这样 webpack 和 webpack-cli 就会被添加到你的 package.json 文件的 devDependencies 部分，成为项目的开发依赖。

使用 Webpack 流程图

配置 webpack.config.js 入口 entry 出口 output

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: { 
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    }
}

配置 package.json script 脚本

{
	"description": "",
	"scripts": {
		"build": "webpack"
	},
	"devDependencies": {
		"webpack": "^5.91.0",
		"webpack-cli": "^5.1.4"
	}
}

打包流程图

使用 Webpack 打包静态网页

Webpack 本身并不直接处理 HTML 文件，但是你可以使用 html-webpack-plugin 插件来简化静态 HTML 文件的打包过程。使用 html-webpack-plugin 来简化静态 index.html 文件的打包过程了。

如何使用 html-webpack-plugin 来打包静态 index.html 的步骤：

安装必要的插件和依赖

在你的项目中，首先确保已经安装了 webpack 和 webpack-cli。安装 html-webpack-plugin：

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

配置 webpack.config.js

在你的 webpack.config.js 文件中，引入 html-webpack-plugin 并添加到 plugins 数组中：

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    })
  ],
};

编写 index.html

在你的源代码目录（在这个例子中是 src）中，创建一个 index.html 文件。这个文件将被 html-webpack-plugin 用作模板，并且插件会自动将你的打包后的 JavaScript 文件（例如 main.js）注入到这个 HTML 文件中。

运行 webpack

当运行 webpack 构建过程时，html-webpack-plugin 会自动处理你的 index.html 文件，并将它输出到你的构建目录（默认为 dist）中。

注意事项

确保你的 HTML 文件中引用了正确的脚本和样式文件路径。在开发环境中，你可能直接引用 src 目录下的文件，但在生产环境中，这些文件会被 webpack 打包并输出到不同的位置。你可以使用 webpack 的 publicPath 配置项来确保引用路径正确。

如果你的项目中有多个 HTML 文件需要打包，你可以为每个文件创建一个 HtmlWebpackPlugin 实例，并在 plugins 数组中添加它们。

启动本地服务 webpack-dev-server

启动本地服务，可实时更新修改的代码，打包变化代码到内存中，然后直接提供端口和网页访问。也就是说以后改了 src 目录下的资源代码，就会直接更新到内存打包，然后反馈到浏览器上了。

下载 webpack-dev-server

npm install webpack-dev-server -D

配置 package.json 自定义脚本

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

运行脚本启动 webpack 开发服务器

npm run serve

使用 Webpack 打包 css 文件

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

module.exports = {
    module: { 
        rules: [
	        {
				test: /\.css$/,
				use: [ "style-loader", "css-loader"]
	        }
        ]
    }
}

匹配所有的 css 文件，use数组里从右向左运行，先用 css-loader 让 webpack 能够识别 css 文件的内容并打包，再用 style-loader 将样式，把 css 插入到 dom 中。

总结：webpack 默认只认识 js 文件和 json 文件。万物皆模块，引到入口才会被 webpack 打包，css打包进 js 中，然后被嵌入在 style 标签插入 dom 上。

style-loader 文档：https://webpack.docschina.org/loaders/style-loader/
css-loader 文档：https://webpack.docschina.org/loaders/css-loader/