webpack 可以看做是模块打包机：他做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（ Scss 、 TypeScript 等），将其打包为合适的格式以供浏览器使用
构建就是把源代码转换成发布到线上可执行的 JavaScript 、CSS、HTML 代码，包括以下内容：
TypeScript 编译成 JavaScript 、 SCSS 编译成 CSS 等等 文件优化 ：压缩 JavaScript 、CSS、HTML 代码，压缩合并图片等构建其实是工程化、自动化思想在前端开发中的体现。把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。
webpack 的基本概念
入口(entry point): 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js ，然而，可以通过在 webpack 配置中配置 entry 属性，来指定一个不同的入口起点（或者也可以指定多个入口起点）。
出口 output: 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js ，其他生成文件的默认输出目录是 ./dist
loader: 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
插件 plugins: loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
模式 mode: 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
webpack 构建过程
开发环境和生产环境
我们在日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，一套供线上使用。
webpack dev server 和其他东西UglifyJSPlugin ， sourcemaps 等简单来说，开发时可能需要打印 debug 信息，包含 sourcemap 文件，而生产环境是用于线上的即代码都是压缩后，运行时不打印 debug 信息等。譬如 axios、antd 等我们的生产环境中需要使用到那么我们应该安装该依赖在生产环境中，而 webpack-dev-server 则是需要安装在开发环境中
平时我们 npm 中安装的文件中有 -S -D, -D 表示我们的依赖是安装在开发环境的，而-S 的是安装依赖在生产环境中。
本文就来带你搭建基本的前端开发环境，前端开发环境需要什么呢？
以上配置就可以满足前端开发中需要的基本配置。下面是本文打包后的效果图：
搭建基本的开发环境
安装
mkdir webpack-dev && cd webpack-dev npm init -y npm i webpack webpack-cli -D
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
