详解Vue CLI3配置解析之css.extract
作者:dailyvuejs 时间:2024-04-28 09:26:04
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件:
核心是使用了插件 extract-text-webpack-plugin
,方式如下:
第一步都是加载插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
这个插件的描述如下:
Extract text from a bundle, or bundles, into a separate file.
然后配置如下:(省去了 rules 相关的配置)
一般配置 filename 来保证最终生成的 css 文件名
plugins: [
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
})
]
我们可以预先用 vue inspect --plugin extract-css
看看最终生成的配置:
/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}
)
在文件 @vue/cli-service/lib/config/css.js
中:
最开始需要获取 vue.config.js
里面配置的 css.extract
:
const isProd = process.env.NODE_ENV === 'production'
const {
extract = isProd
} = options.css || {}
设置一个变量 shouldExtract
const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
const shouldExtract = extract !== false && !shadowMode
如果变量 shouldExtract 为 true,调用 plugin 方法来生成一个插件配置:
这里依赖的插件为 mini-css-extract-plugin
if (shouldExtract) {
webpackConfig
.plugin('extract-css')
.use(require('mini-css-extract-plugin'), [extractOptions])
}
filename 内部也有一个判断过程,如果设置了 filenameHashing,它默认是 true:
filenameHashing: true
类型为 boolean:
filenameHashing: joi.boolean()
const filename = getAssetPath(
options,
`css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`
)
处理 filename 之后,插件还有一个配置项:chunkFilename
下面就是通过 Object.assign
来生成 extractOptions
const extractOptions = Object.assign({
filename,
chunkFilename: filename
}, extract && typeof extract === 'object' ? extract : {})
来源:https://segmentfault.com/a/1190000016390112
标签:Vue,CLI3,css.extract
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python字典删除键值对和元素的四种方法(小结)
2021-06-12 22:58:24
MySQL实现批量更新不同表中的数据
2024-01-24 09:47:28
![](https://img.aspxhome.com/file/2023/1/80141_0s.png)
js算法实例之字母大小写转换
2024-04-16 08:52:05
![](https://img.aspxhome.com/file/2023/2/136832_0s.png)
python-opencv获取二值图像轮廓及中心点坐标的代码
2021-03-10 01:12:02
使用python将最新的测试报告以附件的形式发到指定邮箱
2022-08-24 14:59:16
![](https://img.aspxhome.com/file/2023/5/96925_0s.png)
python web.py开发httpserver解决跨域问题实例解析
2021-02-21 15:44:35
解决mac使用homebrew安装MySQL无法登陆问题
2024-01-27 06:22:24
python实现一次创建多级目录的方法
2021-10-20 11:37:31
教你如何在Pycharm中导入requests模块
2023-05-03 13:10:14
![](https://img.aspxhome.com/file/2023/0/123480_0s.png)
asp生成静态HTML(动态读取)
2013-06-27 19:54:48
如何将txt文本中的数据轻松导入MySQL表中
2009-03-06 17:35:00
Python文件操作和异常处理的方法和技巧
2021-05-22 10:54:10
Elasticsearches打分机制讲解
2023-05-31 10:41:03
![](https://img.aspxhome.com/file/2023/7/120537_0s.jpg)
ASP函数指针试探-GetRef
2009-10-12 12:39:00
JavaScript与JQUERY获取元素的宽、高和位置
2024-04-19 10:18:56
![](https://img.aspxhome.com/file/2023/4/135854_0s.png)
检查并修复mysql数据库表的具体方法
2024-01-24 13:39:43
js中settimeout方法加参数的使用实例
2024-04-16 09:47:15
关于分页查询和性能问题
2008-03-11 12:25:00
如何利用Python处理excel表格中的数据
2022-10-27 03:32:38
![](https://img.aspxhome.com/file/2023/6/118366_0s.png)
MYSQL大数据导入
2024-01-18 18:09:36