Webpack是一款可以帮助您将软件打包的辅助程序，您可以将软件添加到开发环境下使用，当您通过 JavaScript编辑新程序的时候，就可以利用本软件将您编辑的程序模块数据打包，从而让您可以独立保存每一个模块，对于制作模块数据以及分离软件模块数据都是很合适的；Webpack(前端资源管理)提供四个核心概念，入口(entry)、输出(output)、loader、插件(plugins)，在您打包之前您可以预先到官网查看这些功能的详细描述，让您在选择模块打包的时候更轻松！
软件功能
代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
软件特色
1、Webpack提供了强大的开发分析功能
2、可以将一个应用程序的模块打包为不同的数据
3、软件在设计的时候是有很多功能模块的
4、每一个模块都需要独立设计
5、通过这款软件就可以重新编译这些软件模块
6、可以将不同的模块独立保存
7、让您在开发相同应用程序的时候可以利用模块框架
8、提高新应用程序编辑的效率
9、对于维护模块数据以及部署开发环境等方面都是有用的
10、Webpack拥有多种输出模式
11、内置的插件也是比较多的
12、支持webpack.config.js配置模块
13、支持example.js案例文件，手动指定分隔的模块到不同的模块中。
14、所有模板都是这种模式：
```javascript
var foo =“foo”;
导出默认foo;
使用方法
1、下载软件，得到很多配置文件，您可以点击案例查看部分内容的说明
2、webpack.config.js，此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
3、如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
4、您可以进入官网查看软件的帮助说明https://webpack.docschina.org
5、webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问
6、由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。根据你的 webpack 用法，这里有多种方式使用插件。
7、尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：
8、entry 属性的单个入口语法，是下面的简写：
9、对象语法，对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。
用法：entry: {[entryChunkName: string]: string|Array}
使用说明
为块加载安装JSONP回调
将“moreModules”添加到模块对象中，
然后将所有的“chunkIds”标记为加载并启动回调
可以选择/对象来存储加载和加载块
模块缓存：var installedModules = {};
Promise =块加载，0 =块加载
脚本路径功能： function jsonpScriptSrc
检查模块是否在缓存中：if（installedModules [moduleId]）
创建一个新模块（并将其放入缓存）
执行模块功能：modules [moduleId] .call
将模块标记为已加载 module.l = true;
返回模块的导出 return module.exports;
此文件仅包含条目块。
附加块的块加载功能
__webpack_require __。e = function requireEnsure（chunkId）{
var promises = [];
JSONP块加载的JavaScript
案例说明
1、code-splitting-bundle-loader
这个例子结合了代码拆分和加载器。确保您已阅读仅显示该功能的示例文档。
bundle loader被用来为`file.js`创建一个包装模块，用于根据需要加载这个模块。包装模块返回一个可以被调用以异步接收内部模块的函数。
2、将[chunkhash]和Code Splitting组合在一起的一个常见挑战是入口块包含webpack运行时和chunkhash映射。这意味着它总是被更新，`[chunkhash]`是无用的，因为这个块不会被缓存。
解决此问题的一个非常简单的方法是创建另一个仅包含webpack运行时（包括chunkhash映射）的块。这可以通过`optimization.runtimeChunk`选项来实现。为了避免对另一个块的附加请求，这个非常小的块可以内联到HTML页面中。
3、side-effects
这个例子显示了库作者的`sideEffects`标志是如何工作的。
该示例包含一个大型库“big-module”。 `big-module`包含多个子模块：`a`，`b`和`c`。来自子模块的输出在库的输入模块（`index.js`）中被重新输出。消费者使用**一些**出口，从库中通过`import {a，b}从“大模块”中导入它们。根据EcmaScript规范，所有子模块_必须被评估，因为它们可能包含副作用。
`big-module`的`package.json`中的``sideEffects“：false`标志表示该软件包的模块没有副作用（评估时），只显示导出。这使得像webpack这样的工具可以优化再出口。在来自“big-module-with-flag”`的import {a，b}被重写为`import {a} from“big-module-with-flag / a”;从“big-module-with-flag / b”`导入{b}。
该示例包含两个“big-module”变体。 `big-module`没有`sideEffects`标志，`big-module-with-flag`有`sideEffects`标志。示例客户端从每个变体中导入`a`和`b`。
在由webpack构建之后，输出包从`big-module`包含`index.js``a.js``b.js``c.js`，但只包含`a.js`和`b.js`从`big-module-with-flag`。
∨ 展开