webpack 完全指南：极简入门真小白入门，从环境搭建、到webpack的安装、再到webpack的配置文件，最后跑一

配置文件

webpack 的默认配置文件是 webpack.config.js，我们也可以通过 webpack --config 制定配置文件。比如，我们通常会在开放环境中，使用 webpack --config webpack.dev.js；在生产环境中，使用 webpack --config webpack.prod.js。

配置组成

零配置

从 webpack4.0 开始，webpack 宣称我们不需要任何配置就可以使用 webpack 进行打包，也就是 “零配置的 webpack”。

零配置的 webpack 中，只指定了 entry 和 ouput 字段，指定默认入口文件是 ./src/index.js，指定默认出口文件是 ./dist/main.js。

环境搭建

在安装 webpack 之前，我们需要先安装一下 Node.js 和 nvm（已经安装的小伙伴，可以跳过这一趴），因为，webpack 是依赖 Node.js 的环境，而 nvm（Node.js Version Manager）是 Node.js 的包管理器，可以通过它方便安装和切换不同的 Node.js 版本：

安装 nvm

nvm 官方文档：github.com/nvm-sh/nvm

通过 curl 安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

通过 wget 安装：

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

安装完成后，我们可以通过跑一下 nvm list，看看 nvm 是否安装成功：

nvm list 会列举出本地安装的所有 node 版本。

安装 Node.js

nvm 安装成功后，我们可以通过命令行快速安装和使用不同版本的 node：

安装最新版本的 node：node 是最新版本的别名
```
nvm install node
```
安装指定版本的 node：
```
nvm install 16.3.0
```

我们可以选择安装最新版本，安装结束后通过命令 node -v 和 npm -v 来查看是否安装成功：

安装 webpack 和 webpack-cli

首先我们创建一个目录，初始化 npm（-y，默认都选择 yes）：

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

初始化成功后，我们可以看到初始的 package.json 文件：

然后，我们在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

npm install webpack webpack-cli --save-dev

--save-dev，表示该依赖会被安装到 devDependencies 中：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
+ "devDependencies": {
+   "webpack": "^5.61.0",
+   "webpack-cli": "^4.9.1"
+ }
}

我们也可以打印一样 webpack 的版本，看安装是否成功：

初体验：举个 🌰

目前我们项目的目录结构是这样子的：

my-project
|- node_modules
|- package-lock.json
|- package.json

创建一个 webpack 配置文件

我们在 my-project 目录下新建 webpack.config.js，然后通过配置 mode、entry 和 output 实现最基础的打包功能：

mode，代码环境为 product
entry，入口文件设置为 ./src/index.js
output，出口文件设置为 ./dist/bundle.js

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: "production",
};

添加项目代码

我们简单添加一些需要打包的代码：

// src/hello.js

export function hello(name) {
  return `hello ${name}！`;
}

// src/index.js

import { hello } from "./hello";

document.write(hello("webpack"));

使用 webpack 进行打包

打包的命令也十分简单：

npx webpack

成功打包后，我们会发现项目中多了一个 dist 文件夹，bundle.js 中就是我们打包后的代码内容：

验收成果

我们在 dist 中手动创建一个 index.html 文件，并引入打包后的 bundle.js，在浏览器中打开看一下效果：

可以看到页面输出和我们想要的一样，webpack 的初体验就是如此简单又愉快。

webpack 完全指南：极简入门