VUE-CLI webpack.prod.conf.js configuration file in Scaffolding build directory

//here is the path module that introduces NodejsvarPath = require (' path ')//The following is the Utils tool configuration file, mainly used to handle CSS class file loadervarUtils = require ('./utils '))//Webpack is introduced below to use the Webpack built-in pluginvarWebpack = require (' Webpack '))//The following is the Index.js configuration file under the Config directory, which is used primarily to define the underlying configuration of the production and development environmentvarConfig = require ('.. /config ')//The following is the Webpack merger plug-in, mainly used to handle the configuration object merging, can be a large configuration object split into a few small, merged, the same items will be overwrittenvarMerge = require (' Webpack-merge ')//here is the webpack.base.conf.js configuration file, which I have already explained in other blog posts to handle different types of files loadervarBasewebpackconfig = require ('./webpack.base.conf '))//copy-webpack-plugin used to copy files or folders to a specified directory.varCopywebpackplugin = require (' Copy-webpack-plugin '))//Html-webpack-plugin is the HTML file that can be set up, the previous article will be overvarHtmlwebpackplugin = require (' Html-webpack-plugin '))//Extract-text-webpack-plugin This plugin is used to output the bundle of CSS and other files in a separate bundle file, before also detailed saidvarExtracttextplugin = require (' Extract-text-webpack-plugin '))//the role of the Optimize-css-assets-webpack-plugin plugin is to compress the CSS code, but also to remove the Extract-text-webpack-plugin plug-in extracted from the file generated by the duplicate code, Because the same CSS may appear in more than one module, it causes duplicate code, in other words, the two plugins are brothers//See (1) For detailsvarOptimizecssplugin = require (' Optimize-css-assets-webpack-plugin '))//if the value of the current environment variable node_env is testing, import the Test.env.js configuration and set the env to "testing"//if the value of the current environment variable node_env is not testing, set env to "production"varenv = Process.env.NODE_ENV = = = ' testing '? Require ('.. /config/test.env '): Config.build.env//merges the current configuration object and the underlying configuration objectvarWebpackconfig =Merge (Basewebpackconfig, {module: {//here is the configuration of the utils configured to handle the various types of CSS to take over, and dev settings, just as there is a extract:true, this item is a customization, set to true, to generate a separate filerules:utils.styleLoaders ({sourceMap:config.build.productionSourceMap, extract:true    })  },  //Devtool development tool to generate a Sourcemap for easy commissioning  //There is no need to generate sourcemap several times in this case, this generates a SOURCE-MAP type of map file, only for production environmentsDevtool:config.build.productionSourceMap? ' #source-map ':false, output: {//The packaged files are placed in the Dist directory.Path:config.build.assetsRoot,//file name using Static/js/[name]. [Chunkhash].js, where name is Main,chunkhash is the hash value of the module, used for the browser cacheFilename:utils.assetsPath (' js/[name].[ Chunkhash].js '),    //Chunkfilename is a non-ingress module file, which means that chunckfilename is referenced in the filename fileChunkFilename:utils.assetsPath (' js/[id].[ Chunkhash].js ')}, plugins: [//http://vuejs.github.io/vue-loader/en/workflow/production.html    //here is the use of the Defineplugin plugin, which defines the PROCESS.ENV environment variable as env    NewWebpack. Defineplugin ({' Process.env ': env}),NewWebpack.optimize.UglifyJsPlugin ({//the Uglifyjsplugin plugin is designed to compress JS files.Compress: {warnings:false //suppress the warning message when compressing, give the user a kind of vue tall without wrong feeling      },      //generate a map file after compressionSourcemap:true    }),    //extract CSS into its own file    NewExtracttextplugin ({//to generate a standalone CSS file, the following is the name of the generated standalone CSS fileFilename:utils.assetsPath (' css/[name].[ Contenthash].css ')    }),    //Compress extracted CSS. We are using the plugin so that possible    //duplicated CSS from different, can be deduped.    NewOptimizecssplugin ({//Compress CSS Filescssprocessoroptions: {safe:true      }    }),    //Generate dist index.html with correct asset hash for caching.    //You can customize output by editing/index.html    //See Https://github.com/ampedandwired/html-webpack-plugin    //Generating HTML pages    NewHtmlwebpackplugin ({//Non-test environment generation Index.htmlFilename:process.env.NODE_ENV = = = ' testing '? ' Index.html ': Config.build.index,//the template is index.html plus no matterTemplate: ' index.html ',      //Place the JS file at the end of the body tagInjecttrue, minify: {//HTML page After compressing the outputRemovecomments:true, Collapsewhitespace:true, Removeattributequotes:true        //More options:        //https://github.com/kangax/html-minifier#options-quick-reference      },      //necessary to consistently work with multiple chunks via Commonschunkplugin      //classify modules to be inserted into an HTML pageChunkssortmode: ' Dependency '    }),    //split vendor JS into its own file    //the following plug-in is to extract the third-party library files in the packaged file to facilitate browser caching, and improve the speed of the program    NewWebpack.optimize.CommonsChunkPlugin ({//name of the common moduleName: ' Vendor ', Minchunks:function(module, count) {//Any required modules inside Node_modules is extracted to vendor        //package all dependent node_modules below files into vendor        return(Module.resource&&/\.js$/.test (Module.resource) &&module.resource.indexOf (Path.join (__dirname,‘.. /node_modules ')          ) = = 0        )      }    }),    //extract Webpack Runtime and module manifest to their own file in order to    //prevent vendor hash from being updated whenever app bundle is updated    //Extract the Webpack runtime code and the module manifest code into the manifest file, preventing changes to the code but not modifying the third-party library file to cause third-party library files to be packaged as well    NewWebpack.optimize.CommonsChunkPlugin ({name:' Manifest ', chunks: [' Vendor ']    }),    //Copy custom static assets    //Here is the plugin for copying files, I think here is not the role of copying files, but to filter out the packaging process generated by the. Beginning of the file    NewCopywebpackplugin ([{from:path.resolve (__dirname,‘.. /static '), To:config.build.assetsSubDirectory, ignore: [‘.*‘]      }    ])  ]})if(config.build.productionGzip) {//Open Gzi Compressed packaging files, the old iron know why this can still compress it?? , just like you pack the compressed package, the compression package to the browser, the browser automatically unzip the    //you know, vue-cli by default this magical feature is disabled, the reason is surge and netlify static host default help you to upload the file gzip  varCompressionwebpackplugin = require (' Compression-webpack-plugin ')) WebpackConfig.plugins.push (NewCompressionwebpackplugin ({asset:' [Path].gz[query] ', algorithm:' Gzip ', test:NewREGEXP (//here is the JS and CSS file compression‘\\. (' +Config.build.productionGzipExtensions.join (' | ') + ') $ '), Threshold:10240, Minratio:0.8    })  )}if(config.build.bundleAnalyzerReport) {//packaging compiled files to print out detailed file information, vue-cli by default this is disabled, personally think it is a bit of use, you can configure yourself  varBundleanalyzerplugin = require (' Webpack-bundle-analyzer ')). Bundleanalyzerplugin WebpackConfig.plugins.push (NewBundleanalyzerplugin ())} Module.exports= Webpackconfig

(1) optimize-css-assets-webpack-Plugin plug-ins are used in production environments extract-text-webpack-plugin, it's a good idea to use this plugin to install NPM installed as follows:--save-dev optimize-css-assets-webpack-Plugin also install Cssnano this is a CSS compiler NPM install--save-dev Cssnano This VUE-CLI scaffolding does not use Cssnano, but this plug-in official said to install Cssnano, this is not a bug??NewOptimizecssassetsplugin ({assetnameregexp:/\.optimize\.css$/g,//do not write default is/\.css$/gCssprocessor:require (' Cssnano '),//compiler option, do not write default is Cssnano, so use this plugin anyway to CssnanoCssprocessoroptions: {discardcomments: {removeall:true} },//parameters passed to the compilerCanprint:true //is it possible to output information})

VUE-CLI webpack.prod.conf.js configuration file in Scaffolding build directory