大家还记得我们在老版本中,对于线上环境配置中会把所有的 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的更多相关文章

  1. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  2. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  3. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  4. Vue CLI 3 配置兼容IE10

    最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...

  5. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  8. vue cli 3.x 配置使用 sourceMap

    项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.co ...

  9. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

随机推荐

  1. css 背景图居中

    参考:http://www.php.cn/css-tutorial-411901.html position : 50% ;或position : center;

  2. redis Hash 命令

    HDEL key field2 [field2] 删除一个或多个哈希表字段 HEXISTS key field 查看哈希表 key 中,指定的字段是否存在. HGET key field 获取存储在哈 ...

  3. Linux设置复制粘帖的快捷方式

    一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...

  4. Windows API 第17篇 GetLogicalDriveStrings 获取本机所有逻辑驱动器,以根目录的形式表示

    函数原型:DWORD GetLogicalDriveStrings(  DWORD nBufferLength,  // size of buffer                          ...

  5. UOJ261 【NOIP2016】天天爱跑步 LCA+动态开点线段树

    UOJ261 [NOIP2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要玩家每天按时上线, ...

  6. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...

  7. if _name_ == " _main_"

    1.作用 py文件有2种使用方法,第1是自己本脚本自己独立执行:第2是被import到其他文件脚本中执行. if  _name_ == " _main_" 该语句控制其他下一步的脚 ...

  8. combobox 的onLoadSuccess执行两次解决办法和 取值赋值

    加红色字部分 jsp <input class="easyui-combobox" id="keshi" name="keshi" v ...

  9. Oracle VM VirtualBox安装增强功能和共享文件夹的方法

    一.介绍下如何安装增强功能 1)选择安装增强功能的安装包有2种方法,分别如下: 第一种:找到设备->安装增强功能 第二种 1)找到设备->点击选择虚拟盘. 2)找到VirtualBox-& ...

  10. spring入门案例分析及原理

    Springmvc执行原理: 一. 入门案例的执行流程 1. 当启动Tomcat服务器的时候,因为配置了load-on-startup标签,所以会创建DispatcherServlet对象,就会加载s ...