Webpack 的基本使用

用户4556737272865
15 阅读2分钟

一、Webpack 基本介绍

Webpack 是一个强大的静态资源打包工具。它以一个或多个文件作为入口，对整个项目的所有文件进行编译和组合，最终输出一个或多个文件。这些输出的文件是经过编译的，可以在浏览器端顺利运行，我们将 Webpack 输出的文件称为 bundle。这种打包方式能有效处理项目中的各种依赖关系和模块语法，让前端项目在浏览器环境中更好地运行。

官网：webpack.p2hp.com/

二、代码演示

/ (项目根目录)  
├── main.js # 源代码中的主JavaScript文件  
├── js/ # JavaScript源文件目录  
│ └── hello.js   
├── dist/ # 构建后的文件目录  
│ └── main.js # 构建或编译后的主JavaScript文件  
├── index.html # HTML文件（项目入口点）  
└── package.json # 项目依赖和配置文件
  1. main.js
import { hello } from './js/hello';
hello();

这里我们在main.js中导入了hello函数，展示了 ES6 模块的导入语法。这种语法在现代 JavaScript 开发中很常见，但浏览器并不完全支持。

  1. js/hello.js
export function hello() {
    console.log('hello')
}

hello.js文件定义了hello函数，并通过export关键字将其暴露出来，以便其他模块使用。

  1. index.html
<!DOCTYPE html>
<html>
<head>
  <!--<script src="./main.js"></script>-->
  <script src="./dist/main.js"></script>
</head>
<body></body>
</html>

在index.html中，我们可以看到有两种引入脚本的方式，这里要注意直接引入main.js会出现问题，原因后续会解释。

  1. package.json
{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "npx webpack ./main.js --mode=production",
    "build:dev": "npx webpack ./main.js --mode=development",
    "start": "echo ok"
  },
  "dependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }
}

package.json文件定义了项目的基本信息、脚本命令和依赖。其中build和build:dev脚本用于调用 Webpack 进行不同模式下的构建。

三、webpack使用

  1. 首先，在项目中安装 webpack 相关依赖。在项目根目录下打开终端，执行npm install命令。这一步会根据package.json中的配置安装 Webpack 及其相关的命令行工具。

  2. 然后，在项目目录下分别执行命令npm run build和npm run build:dev。npm run build用于生产环境构建，它会对main.js进行优化和编译，生成适合生产环境的dist/main.js文件。npm run build:dev则用于开发环境，生成的代码更便于调试。这些命令会处理main.js中的模块语法，将其编译成浏览器可以识别和运行的 JavaScript 代码。

  3. 在index.html中引入相关脚本文件。如前文所述，如果直接引入main.js会无法运行，因为它包含了浏览器无法直接处理的模块语法。而引入dist/main.js则可以正常运行，这是因为 Webpack 已经将这些语法转换为了浏览器兼容的形式。

  4. 最后，我们可以观察dist/main.js的内容，会发现它与原始的main.js有很大不同，这就是 Webpack 打包和编译的结果。

四、总结

以上展示了webpack最基本的功能：将项目中的脚本文件，打包成浏览器可以直接运行的文件。

avatar
文章
阅读
粉丝