JavaScript Webpack 入门教程：一步一步构建你的第一个项目

2024-02-24 17:31

短信预约 -IT技能 免费直播动态提醒

1. 什么是 Webpack？

Webpack 是一个打包工具，可以将多个 JavaScript 文件捆绑成一个文件，从而提高加载速度和减少请求数量。它还支持各种插件，可以帮助您实现各种功能，如代码压缩、代码分块和代码热更新等。

2. 安装 Webpack

webpack 的安装，据官方网站得知，使用 npm 进行全局安装。

npm install webpack -g

3. 创建一个新的项目

创建一个新的项目，cd 进入到项目根目录。

mkdir new_project
cd new_project

4. 初始化项目

在项目目录下，使用 npm 创建一个新的 package.json 文件，package.json 在整个前端开发中，都是必不可少的一个文件。

npm init -y

5. 安装必要的依赖

以下是项目中需要的依赖

npm install webpack webpack-cli --save-dev

6. 创建一个简单的 JavaScript 文件

在项目目录下，创建一个新的 JavaScript 文件 app.js，输入以下代码：

console.log("Hello, Webpack!");

7. 创建一个简单的 HTML 文件

在项目目录下，创建一个新的 HTML 文件 index.html，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Webpack Tutorial</title>
</head>
<body>
  <script class="lazy" data-src="./dist/bundle.js"></script>
</body>
</html>

8. 配置 Webpack

在项目目录下，创建一个新的配置文件 webpack.config.js，输入以下代码：

const path = require("path");

module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  mode: "development"
};

9. 运行 Webpack

在项目目录下，运行 webpack 命令来构建项目：