webpack 完全指南:极简入门

994 阅读3分钟

配置文件

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

配置组成

01.png

零配置

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

零配置的 webpack 中,只指定了 entryouput 字段,指定默认入口文件是 ./src/index.js,指定默认出口文件是 ./dist/main.js

01.png

环境搭建

在安装 webpack 之前,我们需要先安装一下 Node.jsnvm已经安装的小伙伴,可以跳过这一趴),因为,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 是否安装成功:

01.png

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

安装 Node.js

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

  • 安装最新版本的 node:node 是最新版本的别名

    nvm install node
    
  • 安装指定版本的 node:

    nvm install 16.3.0
    

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

01.png

安装 webpack 和 webpack-cli

首先我们创建一个目录,初始化 npm(-y,默认都选择 yes):

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

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

01.png

然后,我们在本地安装 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 的版本,看安装是否成功:

01.png

初体验:举个 🌰

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

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

创建一个 webpack 配置文件

我们在 my-project 目录下新建 webpack.config.js,然后通过配置 modeentryoutput 实现最基础的打包功能:

  • 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

01.png

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

01.png

验收成果

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

01.png

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

webpack 系列