webpack5基础篇 —— 初识webpack

        webpack也是前端开发老生长谈的问题了，不仅工作中会用到，在面试中也必不可少，是前端开发必须要掌握的知识，那么跟随我的脚步，一起学习webpack5，相信你会有所收获。

一.什么是webpack？

        引用百度百科的解释：webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。简单的说，webpack就是个静态资源打包工具，那我们为什么要使用webpack呢？

二.为什么要使用webpack？

        开发时，我们会使用框架（Vue，React），ES6模块化语法，Less/Sass等css预处理器等语法进行开发，这样的代码要想在浏览器运行必须经过编译成浏览器能识别的Js，Css语法才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码，做兼容性处理，提高代码性能等。

三.webpack的五大核心概念

        介绍五大核心之前，我们先看一个案例，便于后面理解，创建一个文件夹内容如下  

        在count.js中准备了一个简单的加法函数，然后在main.js中引入count.js，最后在index.html中引入main.js。然后打开浏览器，你会发现浏览器报错：Uncaught SyntaxError: Cannot use import statement outside a module （未捕获语法错误：无法在模块外部使用import语句），这是为什么呢？因为浏览器无法识别ES6中的import语法，所以这时候需要我们的webpack出手了。

1.初始化文件

        在项目根目录（名称不能带有中文）下打开终端，输入：npm init -y

         你会发现多了package.json文件，这里需要注意的是，name不能和webpack重名。

2.下载webpack和webpack-cli

         因为目前学习的是webpack5，所以我们直接下最新版本，在终端输入指令：npm i webpack webpack-cli -D

3.五大核心概念

        准备好基本环境之后，我们先来了解一下五大核心概念（重点）

        1.entry

                指示webpack从哪个文件开始打包

        2.output

                指示webpack打包完的文件输出到哪里去，如何命名等。

        3.loader（加载器）

                webpack本身只能处理js，json资源，其他资源需要借助loader，webpack才能解析

        4.plugins（插件）

                扩展webpack的功能

        5.mode（模式）：

                主要是两种模式：

                        开发模式：development

                        生产模式：production

4.创建配置文件

        在项目根目录下创建webpack.config.js文件，并进行如下配置

         配置完成后，运行 npx webpack 进行打包，打包完后会发现根目录多了一个dist目录，里面是打包成功后的文件。这里使用npx的原因是因为能将node_modules中的.bin文件能够临时作为环境变量。

        此时我们将index.html文件中的引入路径改成dist下面的main.js，然后在打开浏览器，此时会发现报错已经消失，这代表webpack将浏览器不认识的语法编译成了可以识别的语法。

五.开发模式的介绍 

        开发模式就是我们开发代码时使用的模式，这个模式下我们主要做两件事

                1.编译代码，使浏览器能识别运行：开发时我们有样式资源，字体图标，图片资源，html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源

                2.代码质量检查，树立代码规范：提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更加美观。

总结：

        到目前为止，我们已经学习了什么是webpack，为什么要使用webpack，以及webpack5的基本打包配置和使用，那这篇初识webpack就先到这里，其他知识点我们后面接着讲。