Webpackフレームワークの核心概念(知識点整理)

webpackとは何か

webpackはフロントエンドのビルドツール（ライブラリやフレームワークではありません）であり、JS（JSXを含む）、coffee、css（lessを含む）などのさまざまなリソースをパッケージングできます。/sass、画像などもモジュールとして処理および使用されます。

1.基本知識

　　1.1 webpackは現代のJavaScriptアプリケーションのモジュールパッケージングツール（ライブラリやフレームワークではありません）です。webpackがアプリケーションを処理する際には、アプリケーションが必要とする各モジュールを含む依存関係図を再帰的に構築し、それらのモジュールを1つまたは複数のbundleにパッケージングします。

　　1.2webpackの4つの核心概念：

　　　　1.2.1 entry（エントリ）：エントリポイント、エントリポイント（複数ある場合もあります）。webpackはこの起点から出発し、エントリファイルが依存関係を持つファイルを特定し、内部の依存関係図を構築し、それを「bundles」と呼ばれるファイルに処理して出力します。

　　　　1.2.2 output（出力）：entry pointで処理されたbundlesファイルの出力パス（path）と名前（filename）を指定します。　　　　

　　　　1.2.3 loader（ローダー）: 非JSファイルを処理するために用いられ、すべてのファイルをwebpackが処理できるモジュールに変換し、パッケージや処理などのためにwebpackに渡します；webpackローダーは、基本的にはすべての種類のファイルをアプリケーションの依存関係図に直接参照できるモジュールに変換するものです。その目標は2つあります：

　　　　　　1.2.3.1 使用test属性，识别出对应于 loader 的可转换文件

　　　　　　1.2.3.2 使用use属性将这些文件进行转换，使其被添加到依赖图中，并且最终会添加到 bundle 中

　　　　　　如果要在 webpack 配置中定义 loader ，要在 module.rules 中定义，而不是 rules

　　　　1.2.4 plugins(插件)：从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以处理各种各样的任务

　　　　　　使用一个插件只需要 require() 它，然后把它添加到 plugins 数组中就行。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

　　　　　　webpack 提供许多开箱可用的插件！查阅插件列表获取更多信息，更详细的图文请参阅官方文档 https://doc.webpack-china.org/concepts/。

总结

以上所述是小编给大家介绍的Webpack框架核心概念(知识点整理)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。