webpack安装

原创已于 2023-09-27 17:58:43 修改 · 396 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

于 2023-09-27 17:00:32 首次发布

本文详细介绍了安装和使用Webpack的前提条件，包括确保Node.js和npm的存在，以及推荐的安装方式（本地项目目录安装）。讲解了全局和本地安装Webpack的区别，并演示了如何在项目中运行Webpack，实现文件打包的过程。

1、前提条件

在开始安装webpack之前，需要确保安装了node.js。进入node.js网址，你会看到

建议下载长期支持版本（LTS-Long Term Support），下载完后点击安装包进行安装，一直点击“下一步”即可。cmd进入命令行工具，输入node -v查看node.js的环境是否安装成功。node.js安装成功的同时，会有一个叫做npm的工具安装成功。npm（node package manager）是一个node里面内置的包管理工具。webpack是基于node来开发的，而我们安装webpack就需要使用npm。

2、两种webpack安装方式

安装webpack，需要安装webpack主包和webpack-cli

2-1、在全局安装webpack

安装命令：npm install webpack webpack-cli --global

--global参数表示在全局的环境下去安装webpack，好处是可以让我们在任何的目录下面都可以去执行webpack，但是我们其实并不推荐大家在全局里安装webpack，因为这样会使你项目的webpack锁定到某个版本里。

2-2、在本地的项目目录安装webpack

假设C:\Users\hu\Desktop\web_study\felixcourses是我的项目目录，以下操作均在该目录完成。

在本地工作目录安装webpack之前，需要去安装一个npm的包管理的配置文件：

执行命令：npm init -y，执行完毕之后，项目的根目录下会产生一个package.json文件，里面是我们项目的一些配置内容。

执行安装命令：npm install webpack webpack-cli --save-dev

安装完毕后，会发现根目录下多了node_modules文件夹和package_lock.json文件，而webpack和webpack-cli以及其他一些的依赖包都放在了node_modules文件夹下，package_lock.json里面是当前这两个包的一些依赖；同时package.json文件会增加一些配置内容，如下图：

3、运行webpack

首先，在C:\Users\hu\Desktop\web_study\felixcourses目录下新建一个02-webpack-app文件夹，在02-webpack-app文件夹下在新建一个src文件夹，src文件夹里有两个文件：hello-world.js和index.js。在02-webpack-app文件夹下新建一个index.html文件。

项目目录如下：

hello-world.js

function helloWorld() {
    console.log('Hello world')
}

export default helloWorld

index.js

import helloWorld from "./hello-world"
helloWorld()

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 案例</title>
</head>

<body>
    <!-- 把打包好的main.js文件引入index.html，在浏览器上打开index.html可以正确执行 -->
    <script src="./dist/main.js"></script>
</body>

</html>

在项目的根目录下执行如下命令：npx webpack