详解Vue CLI3配置解析之css.extract


Posted in Javascript onSeptember 14, 2018

大家还记得我们在老版本中,对于线上环境配置中会把所有的 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 : {})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript打开word文档的方法
Apr 16 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
js实现右键菜单功能
Nov 28 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
react 组件传值的三种方法
Jun 03 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 #Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 #Javascript
在vue项目中使用md5加密的方法
Sep 14 #Javascript
在vue项目中引用Iview的方法
Sep 14 #Javascript
详解webpack-dev-server使用方法
Sep 14 #Javascript
JS 实现微信扫一扫功能
Sep 14 #Javascript
详解webpack2异步加载套路
Sep 14 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php 获取select下拉列表框的值
2010/05/08 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
限制文本字节数js代码
2007/03/06 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
JavaScript中的"=、==、==="区别讲解
2019/01/22 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python遍历数组的方法小结
2015/04/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python事件驱动event实现详解
2018/11/21 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
主题教育活动总结
2014/05/05 职场文书
爱护公共设施的标语
2014/06/24 职场文书
工作求职信
2014/07/04 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python