Vue 项目之 Webpack 的基础打包（3）小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 1. Web

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. `Webpack` 的默认打包

我们先创建一个 basic_webpack 目录，然后用 VS Code 打开它，在该目录下再创建如下目录和文件：

各个文件中的内容如下：

basic_webpack/src/js/format.js：

const formatPrice = function() {
  return "¥99.98";
}
// CommonJS 方式的导出
module.exports = {
  formatPrice
};

basic_webpack/src/js/math.js：

// ES Module 方式的导出
export function sum(num1, num2) {
  return num1 + num2;
}

basic_webpack/src/index.js：

// 导入 sum 函数和 formatPrice 函数
import { sum } from './js/math.js';
const { formatPrice } = require('./js/format.js');
// 使用 sum 函数和 formatPrice 函数
console.log(sum(10, 20));
console.log(formatPrice(100));

basic_webpack/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./src/index.js"></script>
</body>
</html>

然后，在浏览器中打开这个 index.html 文件，打开 Console 控制台，查看打印结果：

可以看到，控制台报错了，并没有正常打印结果。报错信息告诉我们，不能在一个模块外部使用 import 语句。那我们可以对上面的 <script> 标签进行修改：

<script src="./src/index.js" type="module"></script>

将 <script> 标签的 type 指定为 module 后，再回到浏览器中，刷新页面，查看打印结果：

可以看到，又有新的报错了，这是因为当前的代码并没有跑在一个服务上面，如果 <script> 元素上使用了 type="module"，就必须在一个服务上面运行代码。这时，我们可以在 VS Code 中安装一个插件：Live Server，安装好后在 index.html 的代码页右键——Open with Live Server，就能在本地开启一个实时的服务，然后在这个服务上面把我们的文件打开了。这时我们再来打开控制台：

可以看到，刚才的错误没有了，但又报了新的错误：require 未定义。这是因为浏览器不支持 CommonJS 格式的导入。

总之，上面编写的代码不能直接跑在浏览器上面。但在真实开发中，我们通常情况下都是按照上面的这些格式（模块化方式）去编写代码的。可是浏览器又不认识这些代码，那该怎么办呢？这时，我们就可以使用 webpack 对这些代码进行打包，而打包成功后的代码，浏览器是可以识别的，之后我们使用打包后的代码就可以了。

那到底如何利用 webpack 来对我们的代码进行打包呢？非常简单，我们在 VS Code 中打开终端（Terminal—New Terminal），首先确认进入 basic_webpack/ 目录下，然后可以先执行一下 webpack --version 命令看看在当前目录下能不能找到 webpack，如果能正常输出 webpack 的版本信息，就说明在当前目录下是能找到 webpack 的（为什么能找到呢？因为我们之前是全局安装了的）。那我们就要在当前目录下使用 webpack 了，我们直接执行 webpack 这个命令：

你会发现，终端中输出了一大段信息，我们暂且不管它。我们去看现在的 basic_webpack 目录，你会发现，basic_webpack 目录下多了一个 dist 文件夹（dist 其实是 distribution 的缩写，是发布的意思），里面是一个 main.js 文件（打开这个文件，你会发现里面是一些看不太懂的代码，其实，这些就是被压缩丑化过的代码：那些无用的代码就被删掉了，一些变量的名字直接变成了简单的名字......这样就让我们的代码量更少一些）。这时，前面的 3 个 JS 文件中的代码其实就已经被压缩后放进了这个 main.js 文件中。而更加难能可贵的是，这个打包后的文件是可以被浏览器直接识别的，我们可以修改 index.html 中的引入 JS 文件的脚本，引用这个打包后的文件：

<body>
  <!-- <script src="./src/index.js" type="module"></script> -->
  <script src="./dist/main.js"></script>
</body>

再来到浏览器中，刷新页面（当然，前面安装的 Live Server 插件会自动帮助我们刷新），可以看到控制台中成功打印出了结果：

可见，本来不能被浏览器直接认识的代码，经过 webpack 打包后，不仅把代码的体积压缩得更小了，给它压缩成了一个文件，而且浏览器也能识别我们打包后的代码了。

以上，就是 webpack 的最基本使用（对 JS 代码的打包）。

Vue 项目之 Webpack 的基础打包（3）

1. Webpack 的默认打包

1. `Webpack` 的默认打包