webpack:详解entry和output一些重要API的使用

文章目录

    • context
    • entry
      • 单个入口
      • 多个入口
      • entry相关API
      • 例一
      • 例二
      • 例三
    • output
      • output.assetModuleFilename
      • output.chunkFilename
      • output.clean【5.20.0+版本支持】
      • output.filename【重要】
      • output.globalObject
      • output.library【重要】
      • output.library.name
      • output.library.type【重要】
      • output.library.auxiliaryComment
      • output.path【重要】
      • output.publicPath

context

说 entry 和 output 之前要先说一下 context,也就是上下文对象。

Webpack 在寻找相对路径的文件时会以 context 为根目录,context 默认为执行启动 Webpack 时所在的当前工作目录。 如果想改变 context 的默认配置,则可以在配置文件里这样设置它:

module.exports = {context: path.resolve(__dirname, 'app')
}

之所以在这里先介绍 context,是因为 Entry 的路径和其依赖的模块的路径可能采用相对于 context 的路径来描述,context 会影响到这些相对路径所指向的真实文件。

entry

单个入口

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

所以可以看到,我们使用默认配置的时候,也就是 output 不指定输出的名称,那么打包出的文件是 main.js,就是因为我们入口这里默认是 main。

多个入口

两种写法

module.exports = {entry: ['./src/file_1.js', './src/file_2.js']
};module.exports = {entry: {app: './src/app.js',adminApp: './src/adminApp.js',},
};

对象写法的好处是可扩展性强,可以将其拆分然后用专门的工具(如 webpack-merge)将它们合并起来。

entry相关API

  • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
  • filename: 指定要输出的文件名称。
  • import: 启动时需加载的模块。
  • library: 指定 library 选项,为当前 entry 构建一个 library。
  • runtime: 运行时 chunk 的名字。如果设置了,就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
  • publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址。请查看 output.publicPath。

这些 API 很少用到,而且这些主要是用来做代码分割的,而我们做代码分割一般用 optimization.splitChunks 来做,可以看我这篇文章

例一

module.exports = {//...entry: {home: './home.js',shared: ['react', 'react-dom', 'redux', 'react-redux'],catalog: {import: './catalog.js',filename: 'pages/catalog.js',dependOn: 'shared',chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.},personal: {import: './personal.js',filename: 'pages/personal.js',dependOn: 'shared',chunkLoading: 'jsonp',asyncChunks: true, // Create async chunks that are loaded on demand.layer: 'name of layer', // set the layer for an entry point},},
};

例二

使用dependOn,app 这个 chunk 就不会包含 react-vendors 拥有的模块了.

module.exports = {//...entry: {app: { import: './app.js', dependOn: 'react-vendors' },'react-vendors': ['react', 'react-dom', 'prop-types'],},
};

dependOn 选项的也可以为字符串数组:

module.exports = {//...entry: {moment: { import: 'moment-mini', runtime: 'runtime' },reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },testapp: {import: './wwwroot/component/TestApp.tsx',dependOn: ['reactvendors', 'moment'],},},
};

例三

加载动态入口

// 同步
module.exports = {//...entry: () => './demo',
};// 异步
module.exports = {//...entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};// 异步接口加载
module.exports = {entry() {return fetchPathsFromSomeExternalSource(); // 返回一个会被用像 ['src/main-layout.js', 'src/admin-layout.js'] 的东西 resolve 的 promise},
};

output

output.assetModuleFilename

静态资源文件名称,如图片字体图标等
默认: string = '[hash][ext][query]'
可以使用 :[name], [file], [query], [fragment], [base] 与 [path]

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'images/[hash][ext][query]'},module: {rules: [{test: /\.png/,type: 'asset/resource'}]},
};

说句题外话,一般不会在 output 中改变资源名称,而是在这里

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'images/[hash][ext][query]'},module: {rules: [{test: /\.png/,type: 'asset/resource'}},{test: /\.html/,type: 'asset/resource',// 这里generator: {filename: 'static/[hash][ext][query]'}}]},
};

output.chunkFilename

输出的 chunk 文件名。

module.exports = {//...output: {chunkFilename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';},},
};

一般我们也不用这个设置,而是用 optimization.splitChunks 来做,可以看我这篇文章

output.clean【5.20.0+版本支持】

清除打包后的资源,和 CleanWebpackPlugin 插件作用差不多。

module.exports = {//...output: {clean: true, // 在生成文件之前清空 output 目录},
};

output.filename【重要】

每个输出 bundle 的名称,这些 bundle 将写入到 output.path 选项指定的目录下。

module.exports = {//...output: {filename: 'bundle.js',},
};module.exports = {//...output: {filename: '[name].bundle.js',},
};module.exports = {//...output: {filename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';},},
};

id Chunk 的唯一标识,从0开始
name Chunk 的名称
hash Chunk 的唯一标识的 Hash 值
chunkhash Chunk 内容的 Hash 值
其中 hash 和 chunkhash 的长度是可指定的,[hash:8] 代表取8位 Hash 值,默认是20位。

output.globalObject

默认:string = 'self'
当输出为 library 时,尤其是当 libraryTarget 为 'umd’时,此选项将决定使用哪个全局对象来挂载 library。

module.exports = {// ...output: {library: 'myLib',libraryTarget: 'umd',filename: 'myLib.js',globalObject: 'this',},
};

output.library【重要】

输出一个库,为你的入口做导出。

module.exports = {// …entry: './src/index.js',output: {library: 'MyLibrary',},
};

举例:
使用上面的配置打包该文件

export function hello(name) {console.log(`hello ${name}`);
}

打包后可以这样使用

<script src="https://example.org/path/to/my-library.js"></script>
<script>MyLibrary.hello('webpack');
</script>

output.library.name

同上

output.library.type【重要】

配置库暴露的方式。
类型默认包括 ‘var’、 ‘module’、 ‘assign’、 ‘assign-properties’、 ‘this’、 ‘window’、 ‘self’、 ‘global’、 ‘commonjs’、 ‘commonjs2’、 ‘commonjs-module’、 ‘commonjs-static’、 ‘amd’、 ‘amd-require’、 ‘umd’、 ‘umd2’、 ‘jsonp’ 以及 ‘system’,除此之外也可以通过插件添加。

举例

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'var',},},
};var MyLibrary = _entry_return_;
// 在加载了 `MyLibrary` 的单独脚本中
MyLibrary.doSomething();
module.exports = {// …output: {library: {name: 'MyLibrary',type: 'assign',},},
};// 直接赋值给MyLibrary,不管有没有定义,慎用
MyLibrary = _entry_return_;
// 使用assign-properties更安全:如果 MyLibrary 已经存在的话,它将被重用
module.exports = {// …output: {library: {name: 'MyLibrary',type: 'this',},},
};this['MyLibrary'] = _entry_return_;// 在一个单独的脚本中
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // 如果 `this` 为 window 对象
module.exports = {// …output: {library: {name: 'MyLibrary',type: 'window',},},
};window['MyLibrary'] = _entry_return_;window.MyLibrary.doSomething();
module.exports = {// …output: {library: {name: 'MyLibrary',type: 'global',},},
};global['MyLibrary'] = _entry_return_;global.MyLibrary.doSomething();
module.exports = {// …output: {library: {name: 'MyLibrary',type: 'commonjs',},},
};exports['MyLibrary'] = _entry_return_;require('MyLibrary').doSomething();
module.exports = {// …// 试验性质的模块要加上这个experiments: {outputModule: true,},output: {library: {// do not specify a `name` here,输出 ES 模块。type: 'module',},},
};
module.exports = {// …output: {library: {// note there's no `name` heretype: 'commonjs2',},},
};module.exports = _entry_return_;require('MyLibrary').doSomething();
...还有amd、umd,用的都比较少,我们正常一般不指定,所以我们导出的库支持所有导入方式,或者我们使用esmodule也不错

output.library.auxiliaryComment

给打包后的文件中不同的导出方式做注释

module.exports = {// …mode: 'development',output: {library: {name: 'MyLibrary',type: 'umd',auxiliaryComment: {root: 'Root Comment',commonjs: 'CommonJS Comment',commonjs2: 'CommonJS2 Comment',amd: 'AMD Comment',},},},
};

output.path【重要】

默认 string = path.join(process.cwd(), 'dist')

const path = require('path');module.exports = {//...output: {path: path.resolve(__dirname, 'dist/assets'),},
};

output.publicPath

一般用根目录的 publicPath

module.exports = {//...output: {// One of the belowpublicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.publicPath: 'https://cdn.example.com/assets/', // CDN(总是 HTTPS 协议)publicPath: '//cdn.example.com/assets/', // CDN(协议相同)publicPath: '/assets/', // 相对于服务(server-relative)publicPath: 'assets/', // 相对于 HTML 页面publicPath: '../assets/', // 相对于 HTML 页面publicPath: '', // 相对于 HTML 页面(目录相同)},
};
const getPublicPath = () => {if (process.env.NODE_ENV === "development") {return "/project_name";} else {return `//cdn.xxx.com/repo/project_name/dist/`;}
};
publicPath: getPublicPath()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/85717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爬虫获取静态网页数据

自动爬取网页数据 正常情况下是我们使用浏览器输入指定url&#xff0c;对服务器发送访问请求&#xff0c;服务器返回请求信息&#xff0c;浏览器进行解析为我们看到的界面&#xff0c;爬虫就是使用python脚本取代正常的浏览器&#xff0c;获取相应服务器的返回请求信息&#x…

基于springboot+vue的毕业生实习与就业管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

SOC芯片在精度测量领域的设计应用

soc芯片即System-on-a-Chip&#xff0c;简单解释就是系统级芯片。它是一个产品,是一个有专用目标的集成电路,其中包含完整系统并有嵌入软件的全部内容。同时它又是一种技术,用以实现从确定系统功能开始,到软/硬件划分,并完成设计的整个过程。 soc芯片是近两年时下的热门话题&a…

Learn Prompt-“标准“提示

在前面的教程中&#xff0c;我们介绍了指令输入的简单提示&#xff0c;提供实例的提示和角色扮演类的提示&#xff0c;那么是否有一个公式来列出提示的各个部分&#xff0c;并将其组合成一个标准化的提示&#xff1f;答案是肯定的。 角色扮演&#xff08;Role&#xff09; 指令…

iOS添加Mapbox地图库

配置凭据 注册并导航到Account页面。你将需要&#xff1a; 公共访问令牌&#xff1a; 从帐户的tokens页面&#xff0c;你可以复制默认的公共令牌或单击"create a token"按钮来创建新的公共令牌。 带有Downloads:Read范围的秘密访问令牌&#xff1a; 从你帐户的t…

代码随想录算法训练营 动态规划part07

一、爬楼梯 &#xff08;进阶&#xff09; 70. 爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 设跳上 n 级台阶有 f(n) 种跳法。在所有跳法中&#xff0c;青蛙的最后一步只有两种情况&#xff1a; 跳上 1 级或 2 级台阶。 当为 1 级台阶&#xff1a;…

MySQL详解六:备份与恢复

文章目录 1. 数据库备份的分类1.1 从物理和逻辑上分类1.1.1 物理备份1.1.2 逻辑备份 1.2 从数据库的备份策略角度上分类1.2.1 完全备份1.2.2 差异备份1.2.3 增量备份 1.3 常见的备份方法 2. MySQL完全备份2.1 完全备份简介2.2 优点与缺点2.3 实现物理冷备份与恢复2.3.1 实现流程…

AUTOSAR汽车电子嵌入式编程精讲300篇-面向驾驶辅助技术融合算法的日志系统设计与实现(下)

目录 5.4.8 核间通信的设计 5.5 日志系统通信模块的实现 5.5.1 以太网通信的整体架构

Bytebase 2.8.0 - ​全新升级的数据脱敏功能

&#x1f680; 新功能 全新升级的数据脱敏功能&#xff0c;提供更加细化的脱敏和访问权限配置。全新升级的 SQL 编辑器界面。库表同步功能支持 Oracle。支持设置公告。 &#x1f384; 改进 新增基于 MySQL parser 的数据脱敏内核。调整了侧边栏数据库列表&#xff0c;用最近…

学习记忆——宫殿篇——记忆宫殿——记忆桩——工人宿舍

脸盆铁盒白色泡沫绳子电热炉 6. 椅子 7. 门帘 8. 塑料 9. 书 10.安全帽 11. 凳子 暖壶烟灰缸计算器水杯刷子

科目三基础四项(一)

​ 第一天&#xff0c;基础操作&#xff0c;仪表&#xff0c;方向&#xff0c;挡位 按照模块来 1、方向盘两手在两侧 ​ 编辑 转向时的角度&#xff0c;只用&#xff1a;向左540&#xff0c;向右180 向左打和向右打的角度要抵消&#xff0c;回正 掉头向左打满再回 注意…

LaTeX中的[htbp!]选项:控制浮动体的位置

LaTeX中的[htbp!]选项&#xff1a;控制浮动体的位置 在LaTeX中&#xff0c;浮动体&#xff08;例如表格和图像&#xff09;的位置通常由LaTeX的排版算法自动决定。然而&#xff0c;有时我们可能需要更精确地控制浮动体的位置。这时&#xff0c;我们可以使用[htbp!]等选项来指导…

18.3 【Linux】登录文件的轮替(logrotate)

18.3.1 logrotate 的配置文件 logrotate 主要是针对登录文件来进行轮替的动作&#xff0c;他必须要记载“ 在什么状态下才将登录文件进行轮替”的设置。logrotate 这个程序的参数配置文件在&#xff1a; /etc/logrotate.conf /etc/logrotate.d/ logrotate.conf 才是主要的参…

shell 编程

shell 编程 vim-quick-sh window 下 从零开始——PowerShell应用入门&#xff08;全例子入门讲解&#xff09; 各种逗比脚本参考 参考代码1 参考代码2 Linux-Shell脚本编程书籍代码 把平时有用的手动操作做成脚本&#xff0c;这样可以便捷的使用 awk 与 sed 学习&…

代码随想录训练营二刷第三十二天 | 122.买卖股票的最佳时机II 55. 跳跃游戏 45.跳跃游戏II

代码随想录训练营二刷第三十二天 | 122.买卖股票的最佳时机II 55. 跳跃游戏 45.跳跃游戏II 一、 122.买卖股票的最佳时机II 题目链接&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii/ 思路&#xff1a;可以当天买当天卖&#xff0c;只要nums[i…

uni-app实现点击复制按钮 复制内容

注意:uni.setClipboardData({})里面的data参数必须是字符串类型这个是大坑 第一种 <view>{{orderId}}</view> //复制的内容 <button click"copy(orderId)">复制</button>copy(value) {uni.setClipboardData({data: value , // 这里是个坑接…

1795_ChibiOS网络书籍阅读_实时系统的一些概念

全部学习汇总&#xff1a; GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 不同的OS在介绍自己的机理的时候都有自己的模型或者抽象概念&#xff0c;ChibiOS也不例外。这里的几个概念需要做一个基本的理解&#xff1a; 1. 进…

解决方案 | 如何构建市政综合管廊安全运行监测系统?

如何构建市政综合管廊安全运行监测系统&#xff1f;WITBEE万宾城市生命线智能监测仪器&#xff0c;5年免维护设计&#xff0c;集成10多项结构与气体健康监测指标&#xff0c;毫秒级快速响应&#xff0c;时刻感知综合管廊运行态势

嵌入式网络接口之MAC芯片与PHY芯片

目录 0. 参考文档 1.嵌入式网络接口简介 2.嵌入式网络硬件架构方案 2.1 SOC内未集成MAC芯片 2.2 SOC内集成MAC芯片 2.3 主流方案总结 2.3 参照实际网卡的说明 3.MII/RMII及MDIO接口 3.1 MII 3.2 RMII 3.3 MDIO 0. 参考文档 网卡构造&#xff1a;MAC与PHY的关系&…

ETLCloud工具让美团数据管理更简单

美团为第三方开发者和商家提供了一系列开放的API接口和工具&#xff0c;使其可以与美团的业务进行对接和集成&#xff0c;从而获得更多的业务机会和增长空间。 通过美团开放平台&#xff0c;第三方开发者和商家可以实现以下功能&#xff1a; 开放接口&#xff1a;美团开放平台…