webpack安装及使用（一）_webpack 5.65打包-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64081354/article/details/122197529

本文是Webpack入门教程的第一部分，主要介绍了Webpack的安装和基本使用方法。首先，确认Node.js已安装，然后在项目目录安装Webpack和Webpack CLI。接着，创建项目目录结构，包括index.html、main.js等文件，并配置scripts。通过运行Webpack命令，可以生成打包后的代码。此外，文章还提到了在webpack.config.js中配置模式，如development和production，以优化打包结果的大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack安装及使用（一）

前言

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack安装

要使用 Webpack 前须先安装 Node.js。
在命令行中输入node -v 查看版本号如果有对应的版本号说明安装了node。

node -v

敲下回车结果如下，就代表已经安装Node.js。如果没有显示版本号，请先安装Node.js（安装Node.js请参考Node.js官网）。

v16.13.0

接下来cd到项目目录

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

安装webpack以及webpack-cli

npm install --save-dev webpack
npm install --save-dev webpack-cli

在项目中新建以下目录及文件

dist 文件生成目录
index.html 

src
index.js 主入口文件
header.js 需要被index引入的文件

创建好之后，项目目录结构如下：

二、webpack使用

1.准备文件

在index.html文件中导入main.js

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8