其他分享
首页 > 其他分享> > webpack小白基础操作手册

webpack小白基础操作手册

作者:互联网

文章介绍

主要分为两个部分,第一个部分是基本介绍与基本配置,第二个部分是结合实例操作

首先是webpack的基本概念

一、webpack基本概念

1、基本概述:

webpack本质是 一个Node.js 第三方模块包, 用于分析, 并打包代码,

webpack打包文件支持如下:

2、作用:

二、基本使用步骤

基础配置:

建一个空文件夹,建议文件夹名字最好是小写英文或者数字,打开终端,找到本文件位置,接下来开始配置

 可以直接找到该文件打开终端页

 

  也可以在代码编辑器中打开,以vscode为例:

 打开终端后,开始环境准备

1、环境准备

yarn init  或者 npm init 一路enter到底(如果是按照建议(英文小写或数字)命名文件可以直接npm init - y)

 如果命名是英文小写或者数字则可以直接一路enter键按到底,直到出现is this OK? 再按一下enter键即可生成package.json文件。

在终端接着输入npm i webpack webpack-cli -D    下载 webpack webpack-cli包,如果是yarn插件则输入下方指令

注意⚠️

-D:--save-dev的简写,安装到开发依赖,不会被打包,如下载固定版本号,包的后面➕@对应的版本号

-S:--save的简写,安装到生产依赖,会被打包 

下载完成后,对应的文件目录中会多出两个文件package.json、package-lock.json(记录下载包),一个文件夹(node_modules), 里面放了各种node的模块包,webpack也是其中一个, 然后它本身依赖的包也会一并加入进来

               

✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

完成以上配置,wabpack的基本使用配置已经成功,在之后任何打包文件任务都是在此基础上进行操作,下面通过两个实例进行演示

✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

二、结合下面的基需求了解使用步骤

需求:

2个js文件 ->打包成1个js文件

分析:

①:新建src目录

②:新建add.js – 定义求和函数并导出

③:index.js – 引入add模块并使用函数输出结果

④:执行 `yarn build` 或者'npm run build'自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

⑤:打包后默认生成dist和main.js, 观察其中代码

方案一:wabpack默认入口即其他默认配置,我们直接用,俗称“零配置”

webpack打包过程中,需要文件出口和入口,webpack默认src中index.js文件为文件打包入口,那么这里的另一个js文件则为出口,需要设置导出指令,两个导出指令:默认导出与按需导出,这里用默认导出 

设置完出口后需要把出口文件add.js与入口文件index.js建立联系,打开index.js文件,进行配置

 

 配置后,传参调用

 

然后在终端输入 npm run build ,点击enter键打包

默认情况下,webpack会开启生产模式打包,代码会得到极致的压缩

这里出现waring警告可以忽略,稍后我们用另外一种方式进行配置后可以消除!!!

接下里我们进行另外一种方案解决这个需求

方案二:自己配置打包文件的出口和入口

既然我们可以配置webpack打包的出口和入口,那么webpack默认的出入口状态就一定是可以更改的,那么我们应该如何更改,如何配置呢?,下面整理的了配置的文档和步骤我们可以结合文档和步骤来操作下

配置文档: https://webpack.docschina.org/concepts/#entry

在webpack基础配置上进行

 在test目录下新建webpack.config.js文件

 

 

 配置中entry为配置打包文件入口: src文件夹可以命名为任意名称:如a、b、c等等,以及main.js文件的名称也可以是其他任意名称,无论叫什么名字,它们和默认配置中的src文件夹 以及其中的index.js文件性质是一样的。但是不管我们给这个文件夹、文件取了什么名字,一定要保证配置入口文件这里的路径名称与文件名称一致,确保可以找到入口文件!!!

 

这里我们可以把刚刚src文件夹中的index.js文件的名称改一下和配置入口中的文件名保持一致

output配置

path配置中 build在这里和默认配置下的dist文件夹的作用一致,名字依然可以随意取,但是不能为中文,

filename是配置build文件夹下打包后的js文件名称,和默认配置中的

最终打包后生成的文件与我们自己配置的是一致的 

 

  

 

好啦以上就是我们webpack的基础操作使用啦,那么对于webpack打包过程中,默认配置与我们自己配置的出口、入口文档,在执行过程中,有哪些区别又分别都执行了什么任务呢,我们一起来看下

终端输入yarn build或者 npm run build后webpack执行流程图

当然webpack的使用当然不只是这些,了解了基础的配置之后,下篇文章给大家介绍开发工作中webpack经常用到的一些小插件,解决css文件、less文件、图片等文件打包问题,喜欢的伙伴们记得点赞分享哦,你们的点赞是我坚持下去的最大动力!!!!

标签:文件,操作手册,配置,小白,js,webpack,build,打包
来源: https://blog.csdn.net/coding_summer/article/details/120819977