Detailed explanation of the tool configuration file under the vue-cli scaffolding build directory

//Introduce nodejs path modulevar path = require('path')
//Introduce configuration files in the config directoryvar config = require('../config')
// Introduce the extract-text-webpack-plugin plugin to extract css into a separate css file// For details, please see (1)var ExtractTextPlugin = require('extract-text-webpack-plugin')
// exports is actually an object, and the final use of exporting methods is still used. Here, the assetsPath is exported = function (_path) {
  // If it is a production environment, assetsSubDirectory is 'static', otherwise it is still 'static', hahahaha  var assetsSubDirectory = .NODE_ENV === 'production'
    ? 
    : 
  // The difference is that the former returns the complete path, while the latter returns the relative root path of the complete path  // In other words, the path is C:a/a/b/xiangmu/b, then it is b  return (assetsSubDirectory, _path)
  // So the purpose of this method is to return a clean relative root path}

// Below are the relevant configurations for exporting cssLoaders = function (options) {
  // If options have no value, it is an empty object  options = options || {}
  // Basic configuration of cssLoader  var cssLoader = {
    loader: 'css-loader',
    options: {
      // options are used to pass parameters to loader      // minimize means compression. If it is a production environment, compress the css code.      minimize: .NODE_ENV === 'production',
      // Whether to enable cssmap, default is false      sourceMap: 
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // Put the above basic cssLoader configuration in an array    var loaders = [cssLoader]
    // If the function passes a separate loader, it will be added to the loaders array. This loader may be less, sass or something.    if (loader) {
      ({
        // Load the corresponding loader        loader: loader + '-loader',
        // is the es6 method, mainly used to merge objects, shallow copy        options: ({}, loaderOptions, {
          sourceMap: 
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // Note that this extract is a custom property, which can be defined in options. The main function is to extract the file separately when configured as true. False means not to extract it separately. This can be configured separately when used. I instantly feel that the vue author is so awesome    if () {
      return ({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    // The above code is used to return the final read and import loader to process the corresponding file type  }

  // /en/configurations/
  return {
    css: generateLoaders(), // css corresponds to vue-style-loader and css-loader    postcss: generateLoaders(), // Postcss corresponds to vue-style-loader and css-loader    less: generateLoaders('less'), // less corresponds to vue-style-loader and less-loader    sass: generateLoaders('sass', { indentedSyntax: true }), // sass corresponds to vue-style-loader and sass-loader    scss: generateLoaders('sass'), // Scss corresponds to vue-style-loader and sass-loader    stylus: generateLoaders('stylus'), // stylus corresponds to vue-style-loader and stylus-loader    styl: generateLoaders('stylus') // styl corresponds to vue-style-loader and styl-loader  }
}

// Generate loaders for standalone style files (outside of .vue)
// The following mainly deals with the packaging of file types imported in the import method. The above is for this step = function (options) {
  var output = []
  // Below are the loader objects of various css files generated  var loaders = (options)
  for (var extension in loaders) {
    // Extract the laoder of each file    var loader = loaders[extension]
    ({
      // Push the final result into the output array, and get the big deal done      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

 const ExtractTextPlugin = require("extract-text-webpack-plugin");
   = {
    module: {
      rules: [
        {
          test: /\.css$/, //It is mainly used to process css files          use: ({
            fallback: "style-loader", // Fallback means if the css file is not imported successfully, use style-loader to import it            use: "css-loader" // means to use css-loader to read css file from js          })
        }
      ],
      plugins: [
        new ExtractTextPlugin("") // means to generate a file      ]
    }
  }