配置文件
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 的初体验就是如此简单又愉快。