详解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 : {})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue3.0 CLI - 2.5 - 了解组件的三维
下一篇: 批量替换快捷方式目的路径的VBS脚本