什么是Webpack？
Webpack 是一个现代 JavaScript 应用的静态模块打包器。它会将应用中的所有模块（JavaScript 文件、CSS 文件、图片、字体等）作为一个依赖图来处理，并将它们打包成一个或多个文件，最终输出到指定目录。
Webpack 的核心优势在于：
- 模块化：支持 JavaScript、CSS、图片、字体等各种资源的模块化管理。
- 性能优化：通过代码分割、Tree Shaking、缓存优化等方式，提高性能。
- 灵活配置：支持多种插件和加载器（Loader）来满足各种复杂需求。
Webpack的基本工作原理
Webpack 的工作过程可以简单地分为四个阶段：
-
初始化：Webpack会读取配置文件（通常是
webpack.config.js），并将配置项加载到内存中。 -
编译：Webpack会从配置文件的
entry入口开始，递归分析并构建模块依赖图，所有模块都会通过对应的 Loader 转换为合适的格式。 - 打包：所有的模块被打包成一个或多个文件，这些文件可以在浏览器中运行。
-
输出：Webpack将打包后的文件输出到
output指定的文件夹。
安装和基本配置
1. 初始化项目
首先，我们需要初始化一个新的项目并安装Webpack及其相关依赖。
# 创建一个新的项目文件夹
mkdir webpack-demo
cd webpack-demo
# 初始化一个新的npm项目
npm init -y
2. 安装Webpack和Webpack CLI
接下来，安装Webpack及其命令行工具（CLI）。
npm install --save-dev webpack webpack-cli
3. 创建基本的项目结构
在项目文件夹中，我们需要创建一些基础文件来测试Webpack打包功能。可以按如下结构来组织：
webpack-demo/
├── src/
│ ├── index.js
├── dist/
├── webpack.config.js
├── package.json
-
src/index.js：我们的入口文件。 -
dist/：打包后的文件将输出到这里。 -
webpack.config.js：Webpack的配置文件。
4. 配置Webpack
在项目根目录下，创建一个 webpack.config.js 文件，来配置Webpack的基本选项。
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后输出的文件名
path: path.resolve(__dirname, 'dist'), // 输出的目录
},
mode: 'development', // 设置为开发模式（可以改为production进行生产模式打包）
};
这个配置文件告诉Webpack：
- 从
src/index.js开始构建依赖图。 - 打包后的文件会输出到
dist/文件夹中，并命名为bundle.js。
5. 创建入口文件
现在，创建一个简单的入口文件 src/index.js。
// src/index.js
console.log('Hello, Webpack!');
6. 配置NPM脚本
在 package.json 文件中，添加一个 build 脚本，用来执行Webpack的打包命令。
{
"name": "webpack-demo",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
}
}
7. 执行打包
现在，执行 npm run build 来启动Webpack的打包过程。
npm run build
如果一切顺利，Webpack会生成 dist/bundle.js 文件，你可以在浏览器中查看并使用这个文件。
// 打包后的 bundle.js 内容
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (() => {
eval("console.log('Hello, Webpack!');\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
;
8.总结
通过本文学习，你已经可以搭建一个最简单的webpack环境。
