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

 更新时间:2018年09月14日 10:11:14   作者:dailyvuejs   我要评论

这篇文章主要介绍了详解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 : {})

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

相关文章

  • 简述vue路由打开一个新的窗口的方法

    简述vue路由打开一个新的窗口的方法

    这篇文章主要介绍了vue路由打开一个新的窗口的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue2.0 路由模式mode=

    vue2.0 路由模式mode="history"的作用

    这篇文章主要介绍了vue2.0 路由模式mode="history"的作用,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue单文件组件lint error自动fix与styleLint报错自动fix详解

    vue单文件组件lint error自动fix与styleLint报错自动fix详解

    这篇文章主要给大家介绍了关于vue单文件组件lint error自动fix与styleLint报错自动fix的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • vue加载自定义的js文件方法

    vue加载自定义的js文件方法

    下面小编就为大家分享一篇vue加载自定义的js文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 使用vue构建一个上传图片表单

    使用vue构建一个上传图片表单

    这篇文章主要为大家详细介绍了使用vue构建一个上传图片表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 基于vue2的table分页组件实现方法

    基于vue2的table分页组件实现方法

    这篇文章主要为大家详细介绍了基于vue2的table分页组件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue-router跳转页面的方法

    vue-router跳转页面的方法

    本篇文章主要介绍了vue-router跳转页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • vue.js默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    这篇文章主要介绍了vuejs 切换导航条高亮路由高亮的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 浅谈Vue.js中ref ($refs)用法举例总结

    浅谈Vue.js中ref ($refs)用法举例总结

    本篇文章主要介绍了浅谈Vue.js中ref ($refs)用法举例总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论