重构Webpack系列之三 ----出口(output)
重构Webpack系列之三 ----出口(output)
一、概念
Webpack可以通过配置output选项,告知程序如何向硬盘写入编译后的文件。注意,即使可以存在多个entry起点,但也只能指定一个output配置。
备注:以下代码均在webpack.config.js文件进行编辑。
在webpack配置中,output属性的最低要求是,将它的值设置为一个对象,然后为将输出的文件名配置一个output.filename:
module.exports = {output: {filename: 'bundle.js'}
}
二、基本用法
- filename选项
此选项决定了输出的bundle的名称。这些bundle将写入到output.path选项指定的目录下:
module.exports = {output: {filename: 'filename.js'}
}
- path选项
此选项可以设置bundle的输出目录,配置path选项时,注意需填入绝对路径:
module.exports = {output: {filename: 'bundle.js',// 写入到硬盘./src/dist/bundle.jspath: path.resolve(__dirname, '/src/dist')}
}
- publicPath选项
path是指定打包的”储存“路径,publicPath是指定包的”访问“路径。webpack进行打包的时候会把publicPath指定的路径添加到静态资源路径前面。publicPath 并不会对生成文件的路径造成影响,主要是对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片。
module.exports = {output: {path: path.resolve(__dirname, '/src/dist'),publicPath: '/src/dist'}
}
webpack-dev-server也会默认从publicPath为基准,使用它来决定在哪个目录下启用服务。但devServer的配置里面也有一个devServer.static.publicPath,这个选项的作用是告诉服务器在哪个URL上提供静态资源的内容。我们需要做好区分。
- clean选项
在生成文件之前是否选择清空output目录,可以是布尔值也可以是对象,对象还可以配置一些其他参数。
module.exports = {output: {clean: true}
}
- library
为你的入口做导出,输出为一个库,通常用来打包第三方资源包或者其他vendor。
module.exports = {// …entry: './src/index.js',output: {library: 'MyLibrary',},
};
三、多个入口输出
在我们使用 webpack 来打包我们的模块化后的应用程序时,webpack 会生成一个可部署的 /dist 目录,然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上,client(通常是浏览器)就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于缓存的存在,当你需要获取新的代码时,就会显得很棘手。
也就是说,我们想要更新代码时,就要让相对应打包后的文件保持改变,通常是通过修改文件名来告知webpack哪个文件改变了。
如果配置中创建出多于一个“chunk”(例如使用多个入口起点、代码拆分(code splitting)或使用像CommonsChunkPlugin这样的插件)创建多个bundle,则应该使用占位符来确保每个文件具有唯一的名称。
- 使用入口名称
module.exports = {output: {filename: '[name].bundle.js'}
}
- 使用内部chunk id
module.exports = {output: {filename: '[id].bundle.j'}
}
- 使用由生成的内容产生的hash
module.exports = {output: {filename: '[contenthash].bundle.js'}
}
- 结合多个替换组合使用
module.exports = {output: {filename: '[name].[contenthash].bundle.js'}
}
- 使用函数返回filename
module.exports = {output: {filename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js'}}
}
注意,此选项不会影响那些按需加载chunk的输出文件。它只影响最初加载的输出文件。对于按需加载的chunk文件,请使用output.chunkFilename选项来控制输出。通过loader创建的文件也不受影响。
四、配置CDN实例
以下是对资源使用 CDN 和 hash 的复杂示例:
module.exports = {//...output: {path: '/home/proj/cdn/assets/[fullhash]',publicPath: 'https://cdn.example.com/assets/[fullhash]/',},
};
这里官方说明的也马马虎虎的,待之后实验过后为大家分享就麻烦各位看官点点赞吧!多多支持前端菜鸟
重构Webpack系列之三 ----出口(output)相关推荐
- Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
- 手写webpack系列一:了解认识loader-utils
Created By JishuBao on 2019-03-29 12:38:22 Recently revised in 2019-04-01 12:38:22 欢迎大家来到技术宝的掘金世界, ...
- webpack2.x 中文文档 翻译 之 出口Output
出口Output 影响编译的输出 告诉webpack怎样编译输出的文件 允许多个入口一个出口的情况. 用法 const config = {output: 'bundle.js' };module.e ...
- 数字化转型知识方法系列之三:以价值效益为导向推进数字化转型的五大重点任务
数字化转型知识方法系列之三:以价值效益为导向推进数字化转型的五大重点任务 人工智能技术与咨询 一.数字化转型应围绕价值效益系统性推进 新一轮科技革命和产业变革迅猛发展,世界正处在一个从工业时代向信息时 ...
- 《神探tcpdump第五招》-linux命令五分钟系列之三十九
== [系列文章] <神探tcpdump第一招>-linux命令五分钟系列之三十五 <神探tcpdump第二招>-linux命令五分钟系列之三十六 <神探tcpdump第 ...
- 一次递减代码matlab,DEA算法学习系列之三:一次性求解CCR模型所有DMU参数——效率、规模效益、有效性特征、调整值的matlab代码...
<DEA算法学习系列之三:一次性求解CCR模型所有DMU参数--效率.规模效益.有效性特征.调整值的matlab代码>由会员分享,可在线阅读,更多相关<DEA算法学习系列之三:一次性 ...
- webpack系列之优化策略
1.打包速度优化 1.1.速度监控插件-speedMeasureWebpackPlugin speed-measure-webpack-plugin是一款能检测Loader和Plugin耗时的插件,具 ...
- 带你深度解锁Webpack系列(优化篇)
带你深度解锁Webpack系列(优化篇) 本文罗列出了十多种优化方式,大家可以结合自己的项目,选择适当的方式进行优化.这些 Webpack 插件的源码我大多也没有看过,主要是结合 Webpack 官方 ...
- SCCM2012系列之三,SCCM2012部署前的IIS准备
SCCM2012系列之三,SCCM2012部署前的IIS准备 IIS是SCCM2012中非常重要的部署条件.SQL Server,WSUS等产品都需要IIS的支持.因此,完成Active Direct ...
- 活动目录系列之三---域控制器常规卸域
活动目录系列之三---域控制器常规卸域 在介绍正题之前,先补充很多人提出的一个疑问,就是什么情况下计算机名系统不让更改,其实很简单,当在域情况下,用非管理员登陆域,即计算机名就不让更改,运行---CM ...
最新文章
- 一次win10体验旅程
- Why平台:Scalable是互联网公司的价值所在
- 关于 epoch、 iteration和batchsize的区别
- PHP PDO函数库详解
- 进制A~Z,全字母26进制转化
- logo下方显示技术支持信息_LOGO墙形象设计的几种方案
- Linux load函数,kexec_load()函数 Unix/Linux
- 绘制图像直方图 matplotlib
- postman测试上传图片接口步骤教程
- 如何下载秦皇岛市卫星地图高清版大图
- 说话干嘛要“之道”啦?(1-10)
- cubieboard学习笔记
- Git 安装win7
- DevOps 工程师成长日记系列四:打包
- 上半年要写的博客文章30
- Causality matters in medical imaging 文献解读
- C++——素数(质数)专题训练
- 郝斌c语言大纲百度云,C语言学习大纲 郝斌(讲解)
- 绿芯GreenChip电容式触控触摸IC型号性能介绍
- S6系统激活、软件升级和软件授权激活
热门文章
- 容器操作系统再添丁,AWS开源Bottlerocket,类似RancherOS?
- 【优化算法】材料生成算法 (MGA)【含Matlab源码 209期】
- 【定位仿真】基于matlab RSSI三边定位仿真【含Matlab源码 1690期】
- 【时间序列预测】基于matlab RBF神经网络时间序列预测【含Matlab源码 1336期】
- 【图像去噪】基于matlab全变分算法图像去噪【含Matlab源码 1324期】
- 【路径规划】基于matlab GUI改进的遗传算法机器人栅格地图避障路径规划【含Matlab 703期】
- 【数学建模】2021年美赛C题思路(预测模型和图像识别)【含Matlab源码 245期】
- linux搭建vsftp服务器_Linux(CentOS 7)搭建VSFTP服务器
- mysql事务隔离的锁_mysql锁及四种事务隔离级别笔记
- 怎么调用pda的打印机_win7系统如何更改打印机缓存文件夹 win7系统更改打印机缓存文件夹方法【介绍】...