持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第一天,点击查看活动详情

前言： webpack是一个工具，说起一个工具，，那首先要从它是什么、有什么作用、有什么讲起。那么什么时webpack呢？webpack是一个将项目中的静态资源如图片、css等js文件进行压缩加密的一个工具。webpack的作用是分析、压缩、打包代码。webpack的好处是减少文件体积、减少文件数量；提高网页加载速度，让网页加载的更快。

webpack基础使用流程

初始化npm : npm init -y

如果要使用webpack必须要先安装node环境,安装了nodejs后在终端输入初始化npm命令。
- 因为webpack本身是基于nodejs的一个工具类模块

使用node安装webpack

安装命令：npm i webpack webpack-cli -D
- webpack只是打包压缩用的，一般放入开发依赖，所以是'-D'
  - '-D'的意思相当于'--save-d'，将webpack作为开发依赖。
- 将webpack作为本地包，一个项目单独装一个，最好不要作为全局包安装。因为一些老版本的项目可能不兼容导致无法使用。
检测是否安装成功的命令：npx webpack -v
- 安装成功的话就会读取版本信息

在src文件夹中新建js文件

为什么要建这个文件夹呢？
- 因为./src/index.js是webpack的默认打包入口，所以这个src必须要有，src里面index.js也必须要有，否则就会报错。(这个入口目录也是可以更改的，后文讲配置文件的时候统一讲)

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

npx webpack是简写命令，全称命令是npx webpack js文件路径
默认打包./src/index.js这个路径
webpack会把打包好的js文件默认放入./dist/man.js
其他一些打包时的问题
- 如果打包后js代码要改一下，重新打包即可
- 如果有多个文件需要打包，将其他js文件导入index.js这个文件，形成直接\间接依赖关系。
webpack支持commonjs模块化规范与ES6模块化规范，两种导包方式都可以。

Webpack配置文件

webpack的默认配置如下：
    打包命令：npx webpack
    入口文件：./src/index.js
    出口文件：./dist/main.js
修改配置文件就可以将上述的默认值修改成你想要的。不同的项目有不同的配置就相当于不同的人有不同的穿衣风格。

创建配置文件

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

module.exports = {
    //自定义的配置写在这里(对象键值对)
}

webpack常见配置作用

1.mode : 打包模式
- 默认值production : 生产模式（压缩，混淆，加密....... 不可读）
- development :开发模式(代码不会压缩混淆)
2.output: 出口文件(对象类型)
- path : 设置出口文件夹（必须是绝对路径）
  - 默认值: ${__dirname}/dist
- filename: 设置出口js文件名 (相对于path路径)
  - 默认值: main.js
3.entry : 出口文件
- 默认值(相当于项目根目录): ./src/index.js

webpack其他配置

这个配置是写在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
  - 所以得在根目录新建一个webpack.dev.js的文件夹，不然找不到你的自定义配置文件
注意点
- 如果使用npm run build : 还是用默认配置文件来配置你的webpack
- 如果使用npm run dev : 就会使用自定义配置文件来配置你的webpack
- 这个命令相当于npx webpack --config webpack.dev.js
- npx webpack --你的配置文件：用自定义配置文件打包webpack

npm run build 原理流程

这个原理流程面试可能会问

1.在终端输入命令
2.查看配置文件，有自定义按自定义来，否则按默认的来
3.根据entry找到入口文件
4.构建依赖关系图，编译js文件
5.输出到指定文件

Webpack使用基础流程