webpack的入口起点（EntryPoints）

2024-04-11 09:05:57

单个入口(简写)语法

用法：

entry:string|Array<string>

举例：

webpack.config.js

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

T> 当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。

传入数组这种方式有助于，在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时。

当你正在寻找为「一个应用程序或只有一个入口起点的工具（即 library）」快速设置一个 webpack 配置的时候，这会是个很不错的选择。

但是，使用此语法扩展(extend or scale)配置没有太多的灵活性。

对象语法

用法：

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

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

T> “可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

以下列出入口配置和它们的实际用例：

分离应用程序(app) 和公共库(vendor) 入口

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

多个页面应用程序

webpack.config.js

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

webpack的入口起点（EntryPoints）相关推荐

Webpack基础之入口起点
入口起点(Entry Points) 单个入口(简写)语法: 用法:entry: string|Array<string> entry 属性的单个入口语法,是下面的简写当你向 entry ...
webpack打包后引用cdn的js_呕心沥血编写的webpack多入口零基础配置【建议收藏】...
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
vue webpack打包入口文件是哪个_Vue 学习笔记（二十五）：webpack 相关
Webpack 是什么 Vue CLI Webpack 相关 Webpack 更多参考官方文档 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
webpack打包后引用cdn的js_手摸手 Webpack 多入口配置实践
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
结合webpack配置_呕心沥血编写的webpack多入口零基础配置【建议收藏】
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
一文搞懂 Webpack 多入口配置
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
webpack entry入口
上一节我们讲到了 webpack 的配置文件 webpack.config.js ,这个文件需要我们手动在项目根目录下创建.创建后要对其进行配置,本节我们来看一下如何配置 webpack 中的入口,也 ...
webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
出大问题！webpack 多入口html模板在后端
新公司前后端不分离,后端用的是php的twig 我用webpack做多入口文件的打包,虽然成功了.但是引入js和css是在twig上写死的根据文件名. 一开始没问题,因为就定死了那么几个global. ...

最新文章

热门文章