详解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 相关文章推荐
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
咖啡的化学
2021/03/03 咖啡文化
php结合表单实现一些简单功能的例子
2011/06/04 PHP
学习php分页代码实例
2013/10/24 PHP
php自定文件保存session的方法
2014/12/10 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
js实现简易ATM功能
2020/10/27 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python中的字符串替换操作示例
2016/06/27 Python
python机器学习之决策树分类详解
2017/12/20 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
生物技术毕业生自荐信
2013/10/23 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
个人事迹材料范文
2014/12/29 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
MySQL的安装与配置详细教程
2021/06/26 MySQL
浅析Django接口版本控制
2021/06/26 Python