Webpack 基本配置

初始化项目目录

首先我们创建一个目录,初始化 npm,然后在本地安装 webpack,接着安装 webpack-cli

1
2
3
4
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli html-webpack-plugin --save-dev # 或 yarn add --dev webpack webpack-cli html-webpack-plugin

webpack-cli 工具用于在命令行中运行 webpack。html-webpack-plugin 是 webpack 的一个自动生成 HTML5 文件的插件。

现在,我们将创建以下目录结构、文件和内容:

1
2
3
4
5
6
7
8
webpack-demo
|- package.json
|- config/
|- webpack.config.js
|- public/
|- index.html
|- src/
|- index.js

这是我们的项目目录结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "webpack-demo",
"version": "0.1.0",
"description": "Webpack demo",
"scripts": {
"build": "webpack --config config/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0"
}
}

在命令行执行 npm run buildyarn build 命令时,webpack 会使用 config 目录下的 webpack.config.js 配置文件中的配置项来编译项目。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack demo</title>
</head>
<body>
Hello world.
</body>
</html>

该文件为模板文件,当 webpack 编译后会把该文件复制到 webpack 配置的输出目录中。

1
console.log("Hello world.");

这就是我们项目的入口文件了。

Webpack 基本配置

在 config 目录下的 webpack.config.js 文件中填写以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "main.js",
path: path.resolve(__dirname, "../dist"),
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../public/index.html"),
}),
],
};
  • entry:webpack 的入口起点,这里我们将 src 目录下的 index.js 文件作为入口起点。
  • output: webpack 编译后的输出目录,最后编译后的文件将会输出到项目根目录的 dist 文件夹下。
  • plugins:配置插件,可以配置任意多个插件。我们在这里配置了 HtmlWebpackPlugin 插件。该插件会通过配置项中的 template 属性将 public/index.html 文件复制到 dist 目录下,并将 webpack 编译生成的 bundle 插入到文件中。

验证

执行 npm run buildyarn build

1
2
3
4
5
6
7
$ npm run build
[webpack-cli] Compilation finished
asset index.html 225 bytes [emitted]
asset main.js 28 bytes [compared for emit] [minimized] (name: main)
./src/index.js 29 bytes [built] [code generated]
webpack 5.10.1 compiled successfully in 259 ms
✨ Done in 1.38s.

编译结束后,项目根目录项会被创建出一个 dist 目录,目录结构应该是这样的:

1
2
3
dist/
|- index.html
|- main.js

在 index.html 的 body 标签中,我们会发现 main.js 文件已经被正确引入进来了。现在我们用浏览器打开 index.html 文件,会在页面中显示 Hello world. 且控制台中会打印 Hello world. 消息。

至此,一个最基本的 webpack 配置已经完成,有任何想法或疑问欢迎在下方留言讨论。