The Webpack.prod.conf.js of Vue-cli Scaffold

Webpack.prod.conf.js Production Environment configuration file:

' Use strict '//JS Strict mode executionConst PATH = require (' path ')//This module is an exact copy of the Nodejs "path" module published to the NPM registryConst UTILS = require ('./utils ')//utils.js FileConst WEBPACK = require (' Webpack ')//Webpack ModuleConst CONFIG = require ('.. /config ')//is the Index.js under Config folder magical? Const MERGE = require (' Webpack-merge ')//a module that merges arrays, objects as a new objectConst BASEWEBPACKCONFIG = require ('./webpack.base.conf ')//Webpack.base.conf.jsConst Copywebpackplugin = require (' Copy-webpack-plugin ')//copying file and folder modulesConst Htmlwebpackplugin = require (' Html-webpack-plugin ')//adding the hash to the external resources (such as script/link, etc.) introduced in the HTML file dynamically after each compile, the benefit of ensuring that the file name is not duplicated is to prevent the reference cache file from causing the modification to take effect; Generate HTML entry file creationConst Extracttextplugin = require (' Extract-text-webpack-plugin ')//draw out CSS styles to prevent loading confusion by wrapping styles in JSConst Optimizecssplugin = require (' Optimize-css-assets-webpack-plugin ')//Compress CSS PluginsConst Uglifyjsplugin = require (' Uglifyjs-webpack-plugin ')//compress the JS code. Const ENV= require ('.. /config/prod.env ')//set to production environment production//Merge method merges the Module object, in which the base configuration webpack.base.conf.js and the production environment configuration are mergedConst WEBPACKCONFIG =Merge (Basewebpackconfig, {module: {//Module ConfigurationRules:utils.styleLoaders ({//original note generate loaders for standalone style files (outside of. Vue) to generate a standalone style file loaderSourceMap:config.build.productionSourceMap,//Set SourcemapExtracttrue,//USEPOSTCSS:true})}, Devtool:config.build.productionSourceMap? Config.build.devtool:false,//Specifies whether to use SourcemapOutput: {//Specify OutputPath:config.build.assetsRoot, Filename:utils.assetsPath (' Js/[name]. [Chunkhash].js '),//compiled output JS file stored in the JS folder, naming rules add hash calculation    /** * Package The module introduced in the Require.ensure method, if no module is introduced in the method, no chunk block file is generated * * For example in Main.js file, Require.ensure ([],function (re Quire) {alert (11);}) so that the block file is not packaged * Only in this way will the generated block file Require.ensure ([],function (Require) {alert (one); require ('./greeter ')}     * or so require.ensure (['./greeter '],function (require) {alert (11);}) * Chunk hash value only changes in the module introduced in Require.ensure, the hash value will change * Note: For modules not introduced in the ensure method, this property will not take effect and can only be extracted with the Commonschunkplugin plugin */ChunkFilename:utils.assetsPath (' Js/[id]. [Chunkhash].js ')}, plugins: [//http://vuejs.github.io/vue-loader/en/workflow/production.html    NewWebpack. Defineplugin ({' Process.env ': env}),NewUglifyjsplugin ({//Compression JS code plug-in specific can go to NPM check how this plug-in and can set which parametersuglifyoptions: {compress: {warnings:false}}, SourceMap:config.build.productionSourceMap,//whether to generate SourcemapParalleltrue    }),    //extract CSS into its own file    NewExtracttextplugin ({filename:utils.assetsPath (' Css/[name]. [Contenthash].css '),      //Setting The following option to ' false ' would not be extract CSS from codesplit chunks.      //their CSS would instead is inserted dynamically with Style-loader when the Codesplit chunk have been loaded by Webpack.       //It ' s currently set to ' true ' because we is seeing that Sourcemaps is included in the Codesplit bundle as well when It ' s ' false ',      //increasing file size:https://github.com/vuejs-templates/webpack/issues/1110Allchunks:true,    }),    //Compress extracted CSS. We are using the plugin so that possible    //duplicated CSS from different, can be deduped.    NewOptimizecssplugin ({cssProcessorOptions:config.build.productionSourceMap? {Safe:true, map: {inline:false}}: {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:config.build.index, Template:' Index.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true        //More options:        //https://github.com/kangax/html-minifier#options-quick-reference      },      //necessary to consistently work with multiple chunks via CommonschunkpluginChunkssortmode: ' Dependency '    }),    //Keep Module.id stable when vendor modules does    NewWebpack. Hashedmoduleidsplugin (),//Enable scope hoisting    NewWebpack.optimize.ModuleConcatenationPlugin (),//split vendor JS into its own file    NewWebpack.optimize.CommonsChunkPlugin ({name:' Vendor ', Minchunks (module) {//Any required modules inside Node_modules is extracted to 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    NewWebpack.optimize.CommonsChunkPlugin ({name:' Manifest ', minchunks:infinity}),//This instance extracts gkfx chunks from code splitted chunks and bundles them    //in a separate chunk, similar to the vendor chunk    //see:https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk    NewWebpack.optimize.CommonsChunkPlugin ({name:' App ', Async:' Vendor-async ', Children:true, Minchunks:3    }),    //Copy custom static assets    NewCopywebpackplugin ([{from:path.resolve (__dirname,‘.. /static '), To:config.build.assetsSubDirectory, ignore: [‘.*‘]      }    ])  ]//Add plug-ins, which is webpack feature richer})//do you want to allow compression? if(config.build.productionGzip) {const Compressionwebpackplugin= Require (' Compression-webpack-plugin ') WebpackConfig.plugins.push (NewCompressionwebpackplugin ({asset:' [Path].gz[query] ', algorithm:' Gzip ', test:NewRegExp (‘\\. (' +Config.build.productionGzipExtensions.join (' | ') + ') $ '), Threshold:10240, Minratio:0.8    })  )}if(config.build.bundleAnalyzerReport) {const Bundleanalyzerplugin= Require (' Webpack-bundle-analyzer '). Bundleanalyzerplugin WebpackConfig.plugins.push (NewBundleanalyzerplugin ())} Module.exports= Webpackconfig

For the difference between the development environment and the production environment, cite an explanation of the official website length.

The Development Environment (development) and the production environment (production) have different build goals . In the development environment , we need a powerful source map and a localhost server with real-time reload (live reloading) or hot module replacement capability. In the production environment , our goal is to focus on smaller bundles, lighter source maps, and more optimized resources to improve load times. Because of logical separation, we generally recommend that you write separate webpack configurations for each environment.

Although we have made a slight distinction between the production environment and the development environment above, please note that we will still follow the principle of non-repetition (don ' t repeat Yourself-dry) and keep a "generic" Configuration . In order to merge these configurations together, we will use a tool named webpack-merge .

The Webpack.prod.conf.js of Vue-cli Scaffold