详解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代码,粗糙版
Nov 04 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Python中的字典遍历备忘
2015/01/17 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python实现批量监控网站
2016/09/09 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Django分页功能的实现代码详解
2019/07/29 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
查看keras的默认backend实现方式
2020/06/19 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
酒鬼酒广告词
2014/03/21 职场文书
竞聘书模板
2014/03/31 职场文书
投资建议书模板
2014/05/12 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server