Webpack简介、使用过程示例

什么是Webpack

https://www.webpackjs.com/concepts/

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。

静态模块：指的是html/css/js/图片等固定内容的文件。

打包：把静态模块内容压缩（把代码体积压缩小）、整合（把多个CSS文件、或者把多个js文件整合成一个，减少浏览器的请求次数，让用户更快地访问网页）、转译等（前端工程化）。

转译：

• 把 less/sass 转换成 css 代码
• 把 ES6+ 降级成 ES5，从而兼容低版本浏览器
• 支持多种模块标准语法，如CommonJS 和 ECMAScript

使用 Webpack

使用 Webpack的步骤

1）新建并初始化项目，编写业务源代码
2）下载 webpack webpack-cli 到当前项目中，并在package.json中配置局部自定义命令：

npm i webpack webpack-cli --save-dev

3. 运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码），在dist文件夹下面产生 main.js 出口文件

npm run build

示例

准备源代码

在vscode中创建一个空的文件夹，例如webpack_study：

打开vscode的集成终端：

生成初始化清单文件package.json：

在webpack_study目录下新建src/utils目录，并创建check.js文件：

在check.js中定义两个函数，并使用EMAScipt标准语法命名导出：

在 src 文件夹下新建 index.js 文件，这个文件将使用utils/check.js模块中导出的函数：

下载webpack

在package.json文件中配置只属于当前项目的自定义命令

运行自定义命令打包