Webpack可以看作是一个模块打包器：他做的是分析你的项目结构，找到JavaScript模块和其他扩展语言(Scss、TypeScript等)。)浏览器不能直接运行，并将其打包成适合浏览器使用的格式。

构造是将源代码转换成可执行的JavaScript、CSS和HTML代码，并在线发布，包括以下内容：

代码转换：将TypeScript编译成JavaScript，将SCSS编译成CSS等。文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等代码分段：提取多个页面的常用代码，提取第一屏不需要执行的代码，异步加载进行模块合并：模块化项目中有很多模块和文件，需要搭建，将模块分类合并为一个文件。自动刷新：监控本地源代码的变化，自动构建，刷新浏览器代码检查：在代码提交到仓库之前，需要检查代码是否符合规范，单元测试是否通过自动发布；更新代码后，代码会自动构建并在插座上发布和传输。建筑实际上是工程化、自动化思想在前端开发中的体现。用代码实现一系列流程，让代码自动执行这一系列复杂的流程。

网络包的基本概念

入口点):指示webpack应该使用哪个模块作为构建其内部依赖图的开始，webpack将找出哪些模块和库依赖于入口点(直接和间接)。

默认值为。但是，您可以通过在webpack配置中配置entry属性来指定不同的条目起点(或者您可以指定多个条目起点)。

export output:属性告诉webpack在哪里输出它创建的包，以及如何命名这些文件。默认输出文件是。/dist/main.js，其他生成文件的默认输出目录是。/dist

Loader:使webpack能够处理非JavaScript文件(webpack本身只理解JavaScript)。Loader可以将所有类型的文件转换成webpack可以处理的有效模块，然后可以利用webpack的打包能力来处理它们。

请注意，加载程序可以导入任何类型的模块(例如。css文件)，这是webpack的一个独特功能，可能不被其他打包程序或任务执行者支持。我们认为这种语言扩展是必要的，因为它可以使开发人员创建更精确的依赖图。

Plugins:加载器用于转换某些类型的模块，而Plugins可以用于执行更广泛的任务。插件的范围从打包优化和压缩到重新定义环境变量。插件接口非常强大，可以用来处理各种任务。

Mode mode:通过选择开发或生产中的一个来设置模式参数，您可以在相应的模式下启用webpack的内置优化

网络包构建过程

从条目中配置的模块中递归解析条目所依赖的所有模块。每次找到一个模块，就会根据配置的Loader找到对应的转换规则。转换模块后，解析当前模块所依赖的模块。这些模块按条目分组，条目及其所有相关模块被分成一个组，即一个块。最后，网络包将把所有的块转换成文件输出。在整个过程中，网络包会在适当的时候执行插件中定义的逻辑。开发环境和生产环境

在我们日常的前端开发工作中，我们一般有两套构建环境：一套用于开发，另一套用于在线使用。

Development :是一个用于开发的配置文件，用于定义webpack dev server等。production :用于定义UglifyJSPlugin、sourcemaps等。简单地说，在开发过程中可能需要打印调试信息，包括sourcemap文件，而生产环境是在线使用的，也就是说，在代码被压缩后，调试信息不会在运行时打印。例如，axios、antd等需要在我们的生产环境中使用，所以我们应该在生产环境中安装依赖项，而webpack-dev-server需要在开发环境中安装

通常，在我们的npm中安装的文件中有-S-d。-d表示我们的依赖安装在开发环境中，而-s表示安装依赖于生产环境。

本文将带您构建一个基本的前端开发环境