Webpack(前端资源管理)

　　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`。