1.什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具

（1）静态：项目中的静态资源如css、图片等文件

（2）模块: js文件（模块化开发中，一切js文件皆为模块）

（3）打包：主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥~

（4）打包还有一个意思：就是会把你项目中很多个文件压缩成一个文件

2.webpack作用与好处

2.1.作用：分析、压缩、打包代码

2.2.好处：减少文件体积、减少文件数量提高网页加载速度

3.Webpack基本使用流程

3.1.初始化npm : npm init -y

3.2-使用node安装webpack

1.安装命令： npm i webpack webpack-cli -D

D含义：相当于 --save-d , 将webpack作为开发依赖。
因为webpack只是一个代码压缩打包工具，只需要在开发阶段使用，而发布阶段用不上。因此一般放入开发依赖
本地包：不同的项目由于webpack版本不同，比如一些老版本项目可能用最新版的webpack无法打包。因此不建议将webpack作为全局包安装。

2.检测是否安装成功: npx webpack -v

这个命令其实就是检查你的node_module命令下面有没有webpack文件，有的话就读取这个文件里面的版本信息

3.3在项目根目录下执行打包命令： npx webpack

1.webpack打包命名全称是: npx webpack js文件路径

例如: npm webpack ./src/xxx.js 如果没有写js文件路径,那么webpack就会自动打包项目根目录下的 ./src/index.js

2.当项目js代码发生变化时如何打包？

重新执行打包命令即可

4.Webpack配置文件

webpack配置文件作用：修改webpack默认的配置

例如，webpack默认的配置如下

打包命令： npx webpack

入口文件: ./src/index.js

出口文件: ./dist/main.js

通过修改webpack配置文件，可以将上面的一些默认配置全部修改掉。

如果把webpack比喻成一个人，那么配置文件就相当于人身上穿的衣服。不同的人穿衣搭配风格不同。（不同的项目webpack配置是不相同的）

4.1创建配置文件

在项目根目录下创建默认配置文件: webpack.config.js
在配置文件中导出配置

4.2webpack常见配置作用

1.mode : 打包模式

认值production : 生产模式（压缩，混淆，加密....... 不可读）
evelopment :开发模式码不会压缩混淆 复制代码

2.output: 出口文件(对象类型)

path : 设置出口文件夹（必须是绝对路径）
默认值: ${__dirname}/dist
filename: 设置出口js文件名 (相对于path路径)
默认值: main.js

3.entry : 出口文件

默认值(相当于项目根目录): ./src/index.js

4.3webpack其他配置

注意：这个配置是写在package.json文件中的script对象里面

"build" : "webpack"
相当于是给你的当前项目新增了一个命令: npm run build
这个命令等价于npx webpack, 只是额外新增了一个命令。原来的默认命令还是可以用
"dev" : "webpack --config webpack.dev.js"
相当于给你的当前项目新增了一个命令： npm run dev
这个命令将不再使用默认的配置文件webpack.config.js, 而是使用自定义配置文件 webpack.dev.js

注意点

如果使用npm run build : 还是用默认配置文件来配置你的webpack
如果使用npm run dev : 就会使用自定义配置文件来配置你的webpack
这个命令相当于npx webpack --config webpack.dev.js
npx webpack --你的配置文件：用自定义配置文件打包webpack

Webpack基本使用流程