大家還記得我們?cè)诶习姹局校瑢?duì)于線上環(huán)境配置中會(huì)把所有的 css 多打成一個(gè)文件：

為興隆臺(tái)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及興隆臺(tái)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站建設(shè)、興隆臺(tái)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

核心是使用了插件 extract-text-webpack-plugin，方式如下：

第一步都是加載插件

const ExtractTextPlugin = require('extract-text-webpack-plugin')

這個(gè)插件的描述如下：

Extract text from a bundle, or bundles, into a separate file.

然后配置如下：（省去了 rules 相關(guān)的配置）

一般配置 filename 來(lái)保證最終生成的 css 文件名

plugins: [
 new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css')
 })
]

我們可以預(yù)先用 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 中：

最開(kāi)始需要獲取 vue.config.js 里面配置的 css.extract：

const isProd = process.env.NODE_ENV === 'production'

const {
 extract = isProd
} = options.css || {}

設(shè)置一個(gè)變量 shouldExtract

const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
const shouldExtract = extract !== false && !shadowMode

如果變量 shouldExtract 為 true，調(diào)用 plugin 方法來(lái)生成一個(gè)插件配置：

這里依賴的插件為 mini-css-extract-plugin

if (shouldExtract) {
   webpackConfig
    .plugin('extract-css')
     .use(require('mini-css-extract-plugin'), [extractOptions])
}

filename 內(nèi)部也有一個(gè)判斷過(guò)程，如果設(shè)置了 filenameHashing，它默認(rèn)是 true:

filenameHashing: true

類(lèi)型為 boolean：

filenameHashing: joi.boolean()

const filename = getAssetPath(
   options,
   `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`
  )

處理 filename 之后，插件還有一個(gè)配置項(xiàng)：chunkFilename

下面就是通過(guò) Object.assign 來(lái)生成 extractOptions

const extractOptions = Object.assign({
   filename,
   chunkFilename: filename
  }, extract && typeof extract === 'object' ? extract : {})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：詳解VueCLI3配置解析之css.extract
文章分享：http://chinadenli.net/article14/ihscge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、定制開(kāi)發(fā)、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)