VUE-CLI Scaffolding NPM Related file Description-2, Webpack.prod.conf.js

The following is a description of the relevant configuration code and configuration in Webpack.prod.conf.js, and it is recommended to consult the Build/webpack.prod.conf.js

/** Webpack Production environment profile, for production environment execution build * Execution build is primarily performed with Webpack configuration * recommended to consult the Webapck.base.conf.js first. /config/index.js*/varPath = require (' path ')varUtils = require ('./utils ')//The following is the Utils tool configuration file, mainly used to handle CSS class file loadervarWebpack = require (' Webpack '))varConfig = require ('.. /config ')varMerge = require (' Webpack-merge ')//inherit the configuration from the base.conf using the merge methodvarBasewebpackconfig = require ('./webpack.base.conf '))varCopywebpackplugin = require (' Copy-webpack-plugin ')//copy-webpack-plugin used to copy files or folders to a specified directory.varHtmlwebpackplugin = require (' Html-webpack-plugin ')//Html-webpack-plugin is to generate HTML files, you can set the templatevarExtracttextplugin = require (' Extract-text-webpack-plugin ')//Extract-text-webpack-plugin This plugin is used to generate separate files such as CSS in the bundle, such as the app.css we seevarOptimizecssplugin = require (' Optimize-css-assets-webpack-plugin '))//compression of the CSS code, but also 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 will lead to duplicate code, is generally used in conjunction with//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 with the base.conf base 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, used to generate a sourcemap for easy commissioning, only for production environmentsDevtool:config.build.productionSourceMap? ' #source-map ':false, output: {//consistent with base.conf, the path to the output file: Config directory under index.js,path.resolve (__dirname, '. /dist ')Path:config.build.assetsRoot,//There is a difference, the output file plus the ChunkhashFilename:utils.assetsPath (' js/[name].[ Chunkhash].js '),    //Non-Snap file configuration, asynchronous load module, output file plus ChunkhashChunkFilename:utils.assetsPath (' js/[id].[ Chunkhash].js ')}, plugins: [//http://vuejs.github.io/vue-loader/en/workflow/production.html    NewWebpack. Defineplugin ({' Process.env ': env//line-21 Below is the use of the Defineplugin plugin, which defines the PROCESS.ENV environment variable as env    }),    NewWebpack.optimize.UglifyJsPlugin ({compress: {warnings:false //suppress the warning message when compressing}, Sourcemap:true //generate a map file after compression    }),    //extract CSS into its own file, it is clear that the standalone CSS file, file name and hash    NewExtracttextplugin ({filename: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 ({cssprocessoroptions: {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    NewHtmlwebpackplugin ({Filename:process.env.NODE_ENV= = = ' testing '? ' Index.html ': Config.build.index, Template:' Index.html ',//the template is index.html plus no matterInjecttrue,//inject the JS file to the end of the body tagMinify: {//Compress HTML pagesRemovecomments:true,//Remove CommentsCollapsewhitespace:true,//Remove Unused spaceRemoveattributequotes:true//Remove the useless double quotes        //More options:        //https://github.com/kangax/html-minifier#options-quick-reference      },      //necessary to consistently work with multiple chunks via CommonschunkpluginChunkssortmode: ' Dependency '//You can sort the chunk referenced in the page to ensure that the page is referenced in the order    }),    //split vendor JS into its own file    //Public Module plug-in, easy to browser cache, improve the speed of the program (which needs to be packaged into the public module need to trade-offs)    NewWebpack.optimize.CommonsChunkPlugin ({name:' Vendor ',//the name of the public module, corresponding to the packaged JS is vendor.jsMinchunks:function(module, count) {//Any required modules inside Node_modules is extracted to vendor        //resources exist and end with JS, and the paths are packaged in node_node_modules (this can be adjusted according to the timing of the project)        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.js 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    //copy a static file in the project, ignoring the. start File    NewCopywebpackplugin ([{from:path.resolve (__dirname,‘.. /static '), To:config.build.assetsSubDirectory, ignore: [‘.*‘]      }    ])  ]})//gzip Compression plug-inif(Config.build.productionGzip) {//Modify config configuration to open  varCompressionwebpackplugin = require (' Compression-webpack-plugin ')//gzip PluginWebpackConfig.plugins.push (NewCompressionwebpackplugin ({asset:' [Path].gz[query] ', algorithm:' Gzip ', test:NewRegExp (‘\\. (' +Config.build.productionGzipExtensions.join (' | ') + ') $ '), Threshold:10240, Minratio:0.8    })  )}//Modular Analysis Plug-in//The document does not seem to mention how to use it, see comments in Config/index.js, NPM run build--report can see, or modify configif(Config.build.bundleAnalyzerReport) {//module analysis, packaging analysis results in the 127.0.0.1:8080 generation module  varBundleanalyzerplugin = require (' Webpack-bundle-analyzer ')). Bundleanalyzerplugin WebpackConfig.plugins.push (NewBundleanalyzerplugin ())} Module.exports= Webpackconfig//Export All Configurations

Reference: http://www.cnblogs.com/ye-hcj/archive/2017/06.html

VUE-CLI Scaffolding NPM Related file Description-2, Webpack.prod.conf.js