正如我们在 起步 中提到的,在 webpack 配置中有多种方式定义 entry
属性。除了解释为什么它可能非常有用,我们还将向你展示__如何去__配置 entry
属性。
用法:entry: string | [string]
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
entry
属性的单个入口语法,参考下面的简写:
webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
我们也可以将一个文件路径数组传递给 entry
属性,这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 "chunk" 中时,这种方式就很有用。
webpack.config.js
module.exports = {
entry: [
'./src/file_1.js',
'./src/file_2.js'
],
output: {
filename: 'bundle.js'
}
};
当你希望通过一个入口(例如一个库)为应用程序或工具快速设置 webpack 配置时,单一入口的语法方式是不错的选择。然而,使用这种语法方式来扩展或调整配置的灵活性不大。
用法:entry: { <entryChunkName> string | [string] } | {}
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
以下列出一些入口配置和它们的实际用例:
webpack.config.js
module.exports = {
entry: {
main: './src/app.js',
vendor: './src/vendor.js'
}
};
webpack.prod.js
module.exports = {
output: {
filename: '[name].[contenthash].bundle.js'
}
};
webpack.dev.js
module.exports = {
output: {
filename: '[name].bundle.js'
}
};
__这是什么?__这是告诉 webpack 我们想要配置 2 个单独的入口点(例如上面的示例)。
__为什么?__这样你就可以在 vendor.js
中存入未做修改的必要 library 或文件(例如 Bootstrap, jQuery, 图片等),然后将它们打包在一起成为单独的 chunk。内容哈希保持不变,这使浏览器可以独立地缓存它们,从而减少了加载时间。
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
__这是什么?__我们告诉 webpack 需要三个独立分离的依赖图(如上面的示例)。
__为什么?__在多页面应用程序中,server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事,例如使用 optimization.splitChunks
为页面间共享的应用程序代码创建 bundle。由于入口起点数量的增多,多页应用能够复用多个入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。