Hand Tear VUE-CLI Configuration--webpack.prod.conf.js Chapter

' Use strict 'Const PATH= Require (' path ') Const Utils= require ('./utils ')) Const Webpack= Require (' Webpack ') Const Config= require ('.. /config ') Const Merge= Require (' Webpack-merge ') Const Basewebpackconfig= require ('./webpack.base.conf '))//plugin for resource copyConst Copywebpackplugin = require (' Copy-webpack-plugin ') Const Htmlwebpackplugin= Require (' Html-webpack-plugin ')//package css into a CSS file that has been introduced in the form of a linkConst Extracttextplugin = require (' Extract-text-webpack-plugin ')//compress the CSS packageConst Optimizecssplugin = require (' Optimize-css-assets-webpack-plugin ')//compress the JS code of the packageConst Uglifyjsplugin = require (' Uglifyjs-webpack-plugin ') Const ENV= require ('.. /config/prod.env ') Const Webpackconfig=Merge (Basewebpackconfig, {module: {//loader configuration, which can be viewed in the article introducing Utilsrules:utils.styleLoaders ({sourceMap:config.build.productionSourceMap, extract:true, Usepostcss:true})}, Devtool:config.build.productionSourceMap? Config.build.devtool:false, Output: {path:config.build.assetsRoot, Filename:utils.assetsPath (' Js/[name]. [Chunkhash].js '),    //Chunkfilename is used to name those modules that are loaded asynchronously, such as through Require.ensure ()ChunkFilename:utils.assetsPath (' js/[id].[ Chunkhash].js ')}, plugins: [//http://vuejs.github.io/vue-loader/en/workflow/production.html    //Setting Global Variables    NewWebpack. Defineplugin ({' Process.env ': env}),//Compression JS Code    NewUglifyjsplugin ({uglifyoptions: {compress : {warnings:false}}, SourceMap:config.build.productionSourceMap, parallel:true    }),    //extracted from all additional chunk (additional chunk) (by default, it is only extracted from the initial zchunk (initial chunk)) when using commonschunkplugin and having extracted chunk in public chunk (from Extracttextplugin.extract), Allchunks * * must be set to True    NewExtracttextplugin ({filename:utils.assetsPath (' Css/[name]. [Contenthash].css '), Allchunks:true,    }),    //Compress CSS    NewOptimizecssplugin ({cssProcessorOptions:config.build.productionSourceMap? {Safe:true, map: {inline:false}}: {safe:true }    }),    //Generating HTML files in the Dist directory    NewHtmlwebpackplugin ({filename:config.build.index, Template:' Index.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true}, Chunkssortmode:' Dependency '    }),    //The plugin generates a four-digit hash as the module ID based on the relative path of the module, which is recommended for production environments    NewWebpack. Hashedmoduleidsplugin (),//one of the trade-offs when going to Webpack packaging is to package each module in the bundle separately into a closure. These wrapper functions make your JavaScript slower to handle in the browser. In contrast, some tools like Closure Compiler and Rollupjs can be lifted (hoist) or precompiled all modules into a closure to improve the speed of your code execution in the browser.     NewWebpack.optimize.ModuleConcatenationPlugin (),//separate third-party packages    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        )      }    }),    //to avoid chunkhash changes in Venderchunk every time the project code is changed, we will also generate a separate manifestchunk    NewWebpack.optimize.CommonsChunkPlugin ({name:' Manifest ', minchunks:infinity}),//Our main logic of JS file    NewWebpack.optimize.CommonsChunkPlugin ({name:' App ', Async:' Vendor-async ', Children:true, Minchunks:3    }),    //Copy Resources    NewCopywebpackplugin ([{from:path.resolve (__dirname,‘.. /static '), To:config.build.assetsSubDirectory, ignore: [‘.*‘] }]) "}) Module.exports= Webpackconfig

Hand Tear VUE-CLI Configuration--webpack.prod.conf.js Chapter