webpack官方文档分析：Entry Points详解

Posted 2020-12-25 felixwang2

1、有很多种方法可以在webpack的配置中定义entry属性，为了解释为什么它对你有用，我们将展现有哪些方法可以配置entry属性。

2、单一条目语法

用法： entry: string|Array<string>

webpack.config.js

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

上面的写法是下面的简写：

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

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

 

3、对象语法

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

 

webpack.config.js

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

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

4、实际中的使用方案

（1）单独的应用程序

webpack.config.js

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

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

（2）多页面应用程序

webpack.config.js

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

原因：

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

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