详解Vue CLI3配置解析之css.extract
作者:dailyvuejs 发布时间:2024-04-28 09:26:04
标签:Vue,CLI3,css.extract
大家还记得我们在老版本中,对于线上环境配置中会把所有的 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
0
投稿
猜你喜欢
- 如果你完全不懂,那么期望1-2周看完一遍拉倒....不用看的太仔细,后面再看到不懂的时候回头去看这些东西好了1. 前言和准备工作 这里不会介
- 看到这个文章肯定一点就是你把sql没有装到C盘里,呵呵不用怕看下面在安装的时候要注意:在安装SQL Server 2005 Express时
- 不知道大家在做页面的时候会不会遇到样式定义不生效的问题,基本的表现就是怎么改样式都没显示或只有某些浏览器正常,这时通常需要做下面的几步:确认
- Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净、整洁、一目了然。要写出 Pythonic(优雅的、地道的、整洁的)代码
- 如下所示:L = ['adam', 'Lisa', 'bart', 'Paul
- 比较喜欢python的装饰器, 试了下一种用法,通过装饰器来传递sql,并执行返回结果这个应用应该比较少为了方便起见,直接使用了ironpy
- nth-child(),是CSS3中的一个伪类选择符,JQuery选择器继承了CSS的部分语法,允许通过标签名、属性名、内容对DOM元素进行
- 随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持
- pop()函数1、描述pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值。语法pop()方法语法:list.p
- 目标:爬取自己账号中购买的课程视频。一、实现登录账号这里采用的是手动输入验证码的方式,有能力的盆友也可以通过图像识别的方式自动填写验证码。登
- 整数在Python中,整数(integer)是一种内置数据类型,用于表示整数值。Python中的整数类型可以表示任意大小的整数,而不需要考虑
- WebSocket的作用WebSock其实在平常使用,我们是时常见到的,用于实时通讯,例如我们常用的实时聊天、服务端向客户端消息推送、也可以
- USE MASTER GO IF EXISTS(SELECT * FROM dbo.sysdatabases WHERE name='
- 1、DOMWEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENTOBJEC
- 1 conda介绍conda是一个python的包管理器,用来管理、安装、更新python的包和相关的依赖。另外,conda可以为特定任务创
- 本文实例讲述了Python实现的计数排序算法。分享给大家供大家参考,具体如下:计数排序是一种非常快捷的稳定性强的排序方法,时间复杂度O(n+
- 一、在windows环境下修改pip镜像源的方法(以python3.5为例)(1):在windows文件管理器中,输入 %APPDATA%(
- 数据库隔离级别有四种,应用《高性能mysql》一书中的说明:然后说说修改事务隔离级别的方法:1.全局修改,修改mysql.ini配置文件,在
- 问题你的程序崩溃后该怎样去调试它?解决方案如果你的程序因为某个异常而崩溃,运行 python3 -i someprogram.py 可执行简
- 今天我们分享一个小案例,获取天气数据,进行可视化分析,带你直观了解天气情况!核心功能设计总体来说,我们需要先对中国天气网中的天气数据进行爬取