webpack介绍及安装

一、什么是webpack？

        本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

简单来说，webpack将对你整个项目结构进行分析，找到JavaScript模块及其它使用现代语法（语言，Scss，Less，TypeScript等）编写的代码，不能直接在一些浏览器中直接运行的代码将其打包编译为浏览器可识别的代码以供浏览器使用。

二、webpack的核心概念

        Entry：入口，构建其内部依赖图的开始

        output：输出，告诉webpack在哪里输出生成的bundle，以及如何命名这些文件

        loader：模块转换器，将浏览器不能识别的代码文件转换为可识别的代码文件，并添加到依赖图中

        plugin：插件，主要用于打包优化、资源管理、注入环境变量

        mode：模式，为webpack指定一些默认的配置

        browser compatibility：浏览器兼容性，webpack支持所有符合ES5标准的浏览器

        environment：环境，webpack5运行于node.js v10.13.0+的版本

三、安装

        首先创建一个目录，并使用npm进行初始化，然后在本地安装webpack及webpack-cli        

        

         注：webpack官方不推荐全局安装，这将会锁定webpack到指定的版本，当在不同项目中使用的webpack版本不同，可能导致构建失败