Detailed explanation of Vue CLI3 configuration analysis

Everyone still remembers that in the old version, we will type all css into one file in the online environment configuration:

The core is to use plug-insextract-text-webpack-plugin, the method is as follows:

The first step is to load the plugin

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

The description of this plugin is as follows:

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

Then the configuration is as follows: (Save rules related configuration)

General configuration filename to ensure the final generated css filename

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

We can use it in advancevue inspect --plugin extract-css Check out the final generated configuration:

/* ('extract-css') */
new MiniCssExtractPlugin(
 {
  filename: 'css/[name].[contenthash:8].css',
  chunkFilename: 'css/[name].[contenthash:8].css'
 }
)

In the file @vue/cli-service/lib/config/ middle:

You need to obtain it at the beginning Configured inside：

const isProd = .NODE_ENV === 'production'

const {
 extract = isProd
} =  || {}

Setting a variable shouldExtract

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

If the variable shouldExtract is true, call the plugin method to generate a plugin configuration:

The plugin that depends on here ismini-css-extract-plugin

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

There is also a judgment process inside filename. If filenameHashing is set, it defaults to true:

filenameHashing: true

Type is boolean:

filenameHashing: ()

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

After processing filename, the plug-in has another configuration item:chunkFilename

The following is through To generate extractOptions

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.