webpack基础教学，简单易懂（一）（什么是webpack以及webpack的基本使用）

林多多@

已于 2022-03-20 16:28:15 修改

阅读量1.9k

点赞数 2

分类专栏： webpack 文章标签： webpack 前端 javascript

于 2022-03-16 21:26:26 首次发布

本文链接：https://blog.csdn.net/weixin_59816940/article/details/123534816

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端工程化webapck

什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

前端工程化的解决方案

早期的前端工程化解决方案：

grunt（ https://www.gruntjs.net/ ）
gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：

webpack（ https://www.webpackjs.com/ ）
parcel（ https://zh.parceljs.org/ ）

webpack的基本使用

什么是webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

使用webpack

我们拿一个项目来演示webpack的使用过程，一步步带着大家来使用和配置webpack
我们就简单来做一个文字带有背景的颜色的例子，方便大家理解

1. 我们先建立一个空白文档

我们先新建一个src的文件夹
在src的目录下，我们新建index.html,index.css,index,js这三个文件
我们在终端输入npm init –y 这个命令，初始化包管理配置文件 package.json

如图所示，我们这几个文件都建好了，然后我们开始往这三个文件里面去加一些内容
index.html:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>这是一段文字</div>
</body>

</html>

这里我打算用jQuery＋es6的东西来给这个页面加样式，这个时候我们需要下一个jQuery的包
我们在终端中输入

npm i juqery -S

来下载出jQuery的包供我们来使用，这里我怕有伙伴们不知道这行代码啥意思所以解释以下

npm 是包的意思
i是install的意思，写install也行
jQuery是我们要下的包
-S是模块写入到 dependencies对象

这个是npm的知识点了，就说到这里了

在这里插入图片描述
如图所示，这里我们下完了jQuery的包啦！

然后，我打算通过 ES6 模块化的方式导入 jQuery，
index.js:

//使用ES6导入语法，导入jQuery
import $ from 'jquery'
//定义jQuery入口函数
$(function(){
    $('div').css('background-color','pink')
})

然后在index.html导入后发现它报错了，显示是个语法错误，其实它并不错，而是这个语法比较高级，它识别不了
在这里插入图片描述
这回我们就要用webpack来解决这个问题了

2. 在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

在这里插入图片描述
如图，安装成功

3. 在项目中配置 webpack

1.我们在项目根目录中，新创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置
在这里插入图片描述
这个mode里面，我们可以选两个值

development 开发环境不会对打包生成的文件进行代码压缩和性能优化打包速度快，适合在开发阶段使用
production 生产环境会对打包生成的文件进行代码压缩和性能优化打包速度很慢，仅适合在项目发布阶段使用

同时，有的小伙伴会问，这个webpack.config.js文件有什么用：

webpack.config.js 是 webpack 的配置文件。webpack
在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置

2.在 package.json 的 scripts 节点下，新增 dev 脚本如下：
在这里插入图片描述
3. 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

在这里插入图片描述

我们会发现，在根目录下，自动给我们新建了一个dist文件夹，里面有个main.js文件
在这里插入图片描述
这个就是webpack给我们打包好的文件
然后，我们在index.html中导入main.js文件

我们在运行一下这个界面，会发现

诶！运行成功了！

webpack的默认约定

我们发现，webpack打包后给我们自动生成了dist文件夹和main.js文件，这是为什么呢，我们可以修改它们的名字吗？

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

默认的打包入口文件为 src -> index.js
默认的输出文件路径为 dist -> main.js

但是！既然是默认的，就代表我们是可以修改它的

自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。示例代码如下：
在这里插入图片描述
路径和名字自行修改可以了！修改后重新在终端启动一下

npm run dev