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