webpack小白基础操作手册
作者:互联网
文章介绍
主要分为两个部分,第一个部分是基本介绍与基本配置,第二个部分是结合实例操作
首先是webpack的基本概念
一、webpack基本概念
1、基本概述:
webpack本质是 一个Node.js 第三方模块包, 用于分析, 并打包代码,
- 支持所有类型文件的打包,如css,js,html,less等,
- 支持less/sass/stylus => css
- 支持ES6/7/8 => ES5
- 压缩代码, 提高加载速度
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也是其中一个, 然后它本身依赖的包也会一并加入进来
- 第三步:配置script(自定义打包命令)
- 找到package.json文件,找到script,test我们用不到,直接删掉,然后给script配置自定义打包命令
- 这个自定义命令是接下来让webpack干活用的,打包用的命令
- build中打包命令的名字可以随意取,build可以是a、b、c等任意名称,但是在开发中,大家习惯用build命名,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.config.js
在webpack基础配置上进行
在test目录下新建webpack.config.js文件
-
第二步:在webpack.config.js文件中填入配置
配置中entry为配置打包文件入口: src文件夹可以命名为任意名称:如a、b、c等等,以及main.js文件的名称也可以是其他任意名称,无论叫什么名字,它们和默认配置中的src文件夹 以及其中的index.js文件性质是一样的。但是不管我们给这个文件夹、文件取了什么名字,一定要保证配置入口文件这里的路径名称与文件名称一致,确保可以找到入口文件!!!
这里我们可以把刚刚src文件夹中的index.js文件的名称改一下和配置入口中的文件名保持一致
output配置
path配置中 build在这里和默认配置下的dist文件夹的作用一致,名字依然可以随意取,但是不能为中文,
filename是配置build文件夹下打包后的js文件名称,和默认配置中的
- npm run build 打包观察效果
最终打包后生成的文件与我们自己配置的是一致的
好啦以上就是我们webpack的基础操作使用啦,那么对于webpack打包过程中,默认配置与我们自己配置的出口、入口文档,在执行过程中,有哪些区别又分别都执行了什么任务呢,我们一起来看下
终端输入yarn build或者 npm run build后webpack执行流程图
当然webpack的使用当然不只是这些,了解了基础的配置之后,下篇文章给大家介绍开发工作中webpack经常用到的一些小插件,解决css文件、less文件、图片等文件打包问题,喜欢的伙伴们记得点赞分享哦,你们的点赞是我坚持下去的最大动力!!!!
标签:文件,操作手册,配置,小白,js,webpack,build,打包 来源: https://blog.csdn.net/coding_summer/article/details/120819977