详解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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
JSON格式化输出
Nov 10 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
JS原型与继承操作示例
2019/05/09 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python使用装饰器作日志处理的方法
2019/07/11 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
database面试题
2013/03/28 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
会计自荐书
2013/12/02 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
买房子个人收入证明
2014/10/12 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书