相关代码

一、开发准备

// src/hello-world.js
function helloWorld() {
    console.log('Hello world')
}

// src/index.js
helloWorld()

<!-- index.html -->
<!-- 注意这里的js文件的引用顺序要正确 -->
<script src="./src/hello-world.js"></script>
<script src="./src/index.js"></script>

上面代码，html 中引入了两个 script，且引入顺序不能出错。

实际开发中，往往要引入大量的 script，如果顺序出错，就可能会导致项目崩溃。

二、安装 Webpack

1. 在安装 Webpack 之前，要确保已经安装了 nodejs，因为 Webpack 是构建在 nodejs 基础之上的。

2. 创建 npm 包管理配置文件：

npm init

3. 安装 webpack webpack-cli

# 安装最新版
npm install --save-dev webpack

# 安装指定版本
npm install --save-dev webpack@<version>
# 本文使用的版本是 5.58.2
npm install --save-dev webpack@5.58.2

# 全局安装
npm install --global webpack

注意：官方文档不推荐全局安装：

如果使用 webpack4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。

# 安装最新版
npm install --save-dev webpack-cli

# 安装指定版本
npm install --save-dev webpack-cli@<version>
# 本文使用的版本是 4.9.0
npm install --save-dev webpack-cli@4.9.0

三、运行 Webpack

运行之前，先修改一下代码：

// src/hello-world.js
function helloWorld() {
    console.log('Hello world')
}
export default helloWorld

// src/index.js
import helloWorld from './hello-world.js'
helloWorld()

<!-- 只要引入 index.js 一个脚本 -->
<script src="./src/index.js"></script>

运行 webpack：

./node_modules/webpack/bin/webpack.js

# 或
npx webpack

目前，我们没有进行任何 webpack 配置（从 Webpack4 开始，可以使用默认配置来打包文件）。

此时会出现如下警告，说没有设置 mode 配置项，暂时先忽略这个警告：

查看文件目录，发现 Webpack 帮我们生成了 dist 目录，dist 目录中含有 main.js：

上面使用的是 Webpack 的默认配置进行打包，它默认将 src 目录下的 index.js 作为入口文件，打包输出到 dist 目录中的 main.js，且命令行有警告。

如果我们要消除警告，还要自己指定入口文件、输出的目录及文件等其他操作，就需要我们自己定义 Webpack 的相关配置。

四、自定义 Webpack 配置

webpack-cli 给我们提供了丰富的终端命令行指令，可以通过 webpack --help 来查看。但是命令行不方便也不直观，还不能保存配置的内容。因此，Webpack 允许我们通过配置文件，来自定义配置参数。

创建配置文件 webpack.config.js：

const { resolve } = require('path')

// 因为 Webpack 是基于 nodejs 的，所以这里要用 CommonJS 语法
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        // 输出文件夹必须定义为绝对路径，__dirname 表示当前文件所在的目录
        path: resolve(__dirname, './dist')
    }
}

五、重新运行项目

使用 Webpack 重新打包项目之后，dist 文件夹下的 bundle.js 才是我们需要的，修改 html 文件：

<!-- 引用打包好的 JS 文件 -->
<script src="./dist/bundle.js"></script>

此时项目就可以在浏览器中正常运行。