[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 : {})