likes
comments
collection
share

webpack 学习笔记（一）：快速入门

作者站长头像
站长
· 阅读数 29

所谓快速入门，就是理论这种东西我们都先不讲，直接进入正题，上手去使用 webpack！但是呢，也只能仅限于入门级的使用，等我们通过基本使用对 webpack 有个初步印象后，我们依然还是需要去从理论从细节去完整的学习 webpack。

1. 项目初始化

在本地新建一个空文件夹来作为这次入门练习的项目根目录。webpack 学习笔记（一）：快速入门

在命令行工具（终端）中进入该文件目录，执行以下命令对项目进行初始化：

npm init -y

webpack 学习笔记（一）：快速入门

该命令会使用默认参数在项目根目录中创建出 package.json 文件。webpack 学习笔记（一）：快速入门

2. 安装 webpack

在项目根目录中执行以下命令安装 webpack 和 webpack-cli。

npm i --save-dev webpack webpack-cli

webpack 学习笔记（一）：快速入门

3. 创建项目代码

在项目根目录中新建 src/index.js 和 src/a.js 两个文件，代码如下：

// src/a.js
export const name = "有猫饼";
console.log('a.js', name);
// src/index.js
import { name } from './a.js';
console.log(name);

webpack 学习笔记（一）：快速入门

4. 运行项目代码

在项目根目录创建一个 index.html 文件，将 src/index.js 文件引入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src="./src/index.js"></script>
</body>

</html>

在浏览器中运行 index.html 代码会发现如下报错：webpack 学习笔记（一）：快速入门报错原因是因为浏览器不能解析在模块以外的文件中使用 import 的语法。

5. webpack 打包 JS 代码

在项目根目录中执行以下命令，打包 JS 文件：

npx webpack

webpack 学习笔记（一）：快速入门打包成功后，在项目根目录会自动生成一个 dist/main.js 文件。webpack 学习笔记（一）：快速入门这个 JS 文件，就是对 src/index.js 和 src/a.js 打包之后得到的文件。

6. 运行打包文件

在 index.html 中引入打包之后的 dist/main.js 文件：

<script src="./dist/main.js"></script>

刷新浏览器重新运行代码。webpack 学习笔记（一）：快速入门可以看到，打包之后的代码，浏览器就可以正常的解析并运行了。

7. 小结

通过上面这个快速入门的小练习，我们对 webpack 也应该有了一个初步的印象，至少可以小小的总结一些知识点了：

  1. webpack 可以打包 JS 文件；
  2. webpack 可以将浏览器不能识别的 JS 代码打包成浏览器能够识别的 JS 代码；
  3. webpack 可以将多个 JS 文件打包成一个 JS 文件。