Webpack5 第一节

初始Webpack5

官方网站：https://webpack.docschina.org/。

Webpack是一个现代JS应用程序的静态模块打包工具，可以提高模块化开发，避免重复代码，提升开发效率。

Webpack有以下特色：可以将不支持的代码转化为支持的代码，将源代码编译成浏览器能解析的生成代码（如：es6编译为es5，scss编译为css）；还可以进行可视化校验；压缩代码；打包代码，把多个文件合并成一个文件，减少http请求次数，提升生成环境的运行效率。

我们还可以通过webpack来生成本地的服务器，监听开发代码的修改，自动更新页面的显示。

总的来说webpack功能是这些：

1. 将多个不同类型的文件打包；
2. 编译代码，确保浏览器能解析；
3. 对代码进行压缩，减少文件体积，提升开发速度；
4. 对源代码进行格式化校验；
5. 有热更新功能，提高开发效率；
6. 不同环境，提供不同的打包策略。

Webpack五个核心概念

1. 入口 （Entry）:告诉 webpack 应该使用哪个模块，来作为构建整个项目的开始
2. 出口 （Output）:告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件（默认为 main.js ）
3. 加载器 （Loader）:webpack 只能理解 JS 和 JSON 文件，loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用 (例子：css-loader | html-loader)
4. 插件 （Plugins）:插件是 webpack 的支柱功能，能够执行范围更广的任务，包括：打包优化、压缩、重新定义环境中的变量等 (例子：html-webpack-plugin)
5. 模式 （Mode）:区分环境，不同的环境打包逻辑不同。development（优化打包速度，提供调试的辅助功能）；production（优化打包结果，打包之后代码的运行效率和性能优化）；none（最原始的打包）。

上手Webpack

首先我们需要有一个node环境，下载链接为https://nodejs.org/en/download，安装node后我们要安装cnpm（国内优化的npm镜像版本，核心功能和npm一样，但是下载速度差别很大）

npm install -g cnpm --registry=https://registry.npmmirror.com

初始化项目，出现package.json文件即表示成功

cnpm init -y

安装相关的依赖

cnpm i webpack webpack-cli -D

创建webpack入口文件

打包命令（指定model）

npx webpack ./src/index.js -o ./dist --mode=development

npx是npm 的包命令工具，-o是其项目的出口文件（即输出到当前目录的scr文件夹下）