对webpack的初步研究2

Entry Points

如“ 入门”中所述，有多种方法可以entry在webpack配置中定义属性。我们会告诉你，你的方法可以配置的entry属性，除了解释为什么它可能对你有用

Single Entry (Shorthand) Syntax

Usage: entry: string|Array<string>

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

The single entry syntax for the entry property is a shorthand for:

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

传递数组时会发生什么entry？将一组文件路径传递给entry属性会创建所谓的“多主条目”。当您想要将多个依赖文件一起注入并将其依赖关系映射到一个“块”时，这非常有用。

当您希望为具有一个入口点（即库）的应用程序或工具快速设置webpack配置时，这是一个很好的选择。但是，使用此语法扩展或扩展配置的灵活性不大。

 

对象语法 

用法： entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

对象语法更详细。但是，这是在应用程序中定义条目/条目的最具扩展性的方法。

“可扩展的webpack配置”是可以重用并与其他部分配置组合的配置。这是一种流行的技术，用于按环境，构建目标和运行时分离关注点。然后使用webpack-merge等专用工具合并它们。

方案 

以下是条目配置及其实际用例列表：

单独的应用程序和供应商条目 

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

这是做什么的？在票面价值，这告诉的WebPack创建开始在两个依赖关系图app.js和vendors.js。这些图完全独立且彼此独立（每个包中都有一个webpack引导程序）。这通常适用于只有一个入口点（不包括供应商）的单页面应用程序。

为什么？此设置允许您利用CommonsChunkPlugin应用程序包中的任何供应商参考并将其提取到供应商捆绑包中，并将其替换为__webpack_require__()调用。如果应用程序包中没有供应商代码，那么您可以在webpack中实现一种称为长期供应商缓存的通用模式。

 

多页面应用程序 

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

这是做什么的？我们告诉webpack我们想要3个独立的依赖图（如上例所示）。

为什么？在多页面应用程序中，服务器将为您提取新的HTML文档。该页面重新加载此新文档，并且资源已重新加载。但是，这为我们提供了做多件事的独特机会：

• 用于CommonsChunkPlugin在每个页面之间创建共享应用程序代码包。随着入口点数量的增加，在入口点之间重用大量代码/模块的多页面应用程序可以从这些技术中受益匪浅。

根据经验：对于每个HTML文档，只使用一个入口点。