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

2024-03-01 00:15:21

大家还记得我们在老版本中，对于线上环境配置中会把所有的 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-cli官方脚手架配置

一,准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像二,创建项目 1.vue环境搭建创建目录resume 1)npm init -y 2)npm install vue-cli -g (安装vue-cli ) 3)vue init webpack --dirname(为空时默认当前目录) 输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了. Project name :项目名称 ,如果不需要更改直接回车就可以了.注意:这里不能使用大写,所以我把名
vue-cli配置环境变量的方法

在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://
基于vue cli 通过命令行传参实现多环境配置

大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm
vue-cli 引入、配置axios的方法

一.npm 安装axios,文件根目录下安装,指令如下 npm install axios --save-dev 二.修改原型链,在main.js中引入axios import axios from 'axios' 接着将axios改写为Vue的原型属性, Vue.prototype.$http=axios 这样之后就可在每个组件的methods中调用$http命令完成数据请求三.在组件中使用 methods: { get(){ this.$http({ method:'get', ur
vue-cli脚手架-bulid下的配置文件

本文章适合初学者学习,如有错请提出.近期对vue比较感兴趣,所以准备用vue写一个blog.早期先对vue脚手架了解一下,对于新手官网建议先不用vue-cli,但我觉得如果没有任何的依据凭自己写一个项目(包括webpack的配置等)这无疑是浪费时间的而且都最后还是是而非的.所以我觉得完全可以用脚手架建一个webpack项目,然后我们可以具体对应它生成的文件学习(当然这只是我的学习方法,我认为这样比较好学,但不一定人人都是这样的). 在学习的过程中发现网上许多的简介都已经过期(vue发展的过快了吧
vue-cli3.0使用及部分配置详解

好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个在选择功能后,会询问更细节的配置, TypeScript: 是否使
详解如何配置vue-cli3.0的vue.config.js

本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue
vue-cli3脚手架的配置及使用教程

这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行
详解vue-cli脚手架中webpack配置方法

什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它
Vue-cli配置打包文件本地使用的教程图解

最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

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

相关推荐

随机推荐