所谓快速入门,就是理论这种东西我们都先不讲,直接进入正题,上手去使用 webpack!
但是呢,也只能仅限于入门级的使用,等我们通过基本使用对 webpack 有个初步印象后,我们依然还是需要去从理论从细节去完整的学习 webpack。
1. 项目初始化
在本地新建一个空文件夹来作为这次入门练习的项目根目录。
在命令行工具(终端)中进入该文件目录,执行以下命令对项目进行初始化:
npm init -y
该命令会使用默认参数在项目根目录中创建出 package.json
文件。
2. 安装 webpack
在项目根目录中执行以下命令安装 webpack 和 webpack-cli。
npm i --save-dev webpack webpack-cli
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);
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
代码会发现如下报错:
报错原因是因为浏览器不能解析在模块以外的文件中使用 import
的语法。
5. webpack 打包 JS 代码
在项目根目录中执行以下命令,打包 JS 文件:
npx webpack
打包成功后,在项目根目录会自动生成一个 dist/main.js
文件。
这个 JS 文件,就是对 src/index.js
和 src/a.js
打包之后得到的文件。
6. 运行打包文件
在 index.html
中引入打包之后的 dist/main.js
文件:
<script src="./dist/main.js"></script>
刷新浏览器重新运行代码。
可以看到,打包之后的代码,浏览器就可以正常的解析并运行了。
7. 小结
通过上面这个快速入门的小练习,我们对 webpack 也应该有了一个初步的印象,至少可以小小的总结一些知识点了:
- webpack 可以打包 JS 文件;
- webpack 可以将浏览器不能识别的 JS 代码打包成浏览器能够识别的 JS 代码;
- webpack 可以将多个 JS 文件打包成一个 JS 文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。