[Vue CLI 3] 配置解析之 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 : {})
来源:https://segmentfault.com/a/1190000016390112
[Vue CLI 3] 配置解析之 css.extract的更多相关文章
- [Vue CLI 3] 配置解析之 parallel
官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...
- [Vue CLI 3] 配置解析之 indexPath
在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...
- @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap
vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...
- Vue CLI 3 配置兼容IE10
最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...
- [Vue CLI 3] 配置 webpack-bundle-analyzer 插件
首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- vue cli 3.x 配置使用 sourceMap
项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.co ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
随机推荐
- css 背景图居中
参考:http://www.php.cn/css-tutorial-411901.html position : 50% ;或position : center;
- redis Hash 命令
HDEL key field2 [field2] 删除一个或多个哈希表字段 HEXISTS key field 查看哈希表 key 中,指定的字段是否存在. HGET key field 获取存储在哈 ...
- Linux设置复制粘帖的快捷方式
一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...
- Windows API 第17篇 GetLogicalDriveStrings 获取本机所有逻辑驱动器,以根目录的形式表示
函数原型:DWORD GetLogicalDriveStrings( DWORD nBufferLength, // size of buffer ...
- UOJ261 【NOIP2016】天天爱跑步 LCA+动态开点线段树
UOJ261 [NOIP2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要玩家每天按时上线, ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
- if _name_ == " _main_"
1.作用 py文件有2种使用方法,第1是自己本脚本自己独立执行:第2是被import到其他文件脚本中执行. if _name_ == " _main_" 该语句控制其他下一步的脚 ...
- combobox 的onLoadSuccess执行两次解决办法和 取值赋值
加红色字部分 jsp <input class="easyui-combobox" id="keshi" name="keshi" v ...
- Oracle VM VirtualBox安装增强功能和共享文件夹的方法
一.介绍下如何安装增强功能 1)选择安装增强功能的安装包有2种方法,分别如下: 第一种:找到设备->安装增强功能 第二种 1)找到设备->点击选择虚拟盘. 2)找到VirtualBox-& ...
- spring入门案例分析及原理
Springmvc执行原理: 一. 入门案例的执行流程 1. 当启动Tomcat服务器的时候,因为配置了load-on-startup标签,所以会创建DispatcherServlet对象,就会加载s ...