Webpack.prod.conf.js

var path = require (' path ')
var utils = require ('./utils ')
var webpack = require (' Webpack ')
var config = require ('.. /config ')
var merge = require (' Webpack-merge ')
var basewebpackconfig = require ('./webpack.base.conf ')
var htmlwebpackplugin = require (' Html-webpack-plugin ')

Plug-in for extracting text from a bundle generated by Webpack to a specific file
The Css,js file can be extracted to separate it from the bundle of webpack output

var extracttextplugin = require (' Extract-text-webpack-plugin ')

var env = Process.env.NODE_ENV = = = ' Testing '
? Require ('.. /config/test.env ')
: config.build.env

Webpack configuration with consolidated base
var webpackconfig = Merge (Basewebpackconfig, {
Module: {
Rules:utils.styleLoaders ({
SourceMap:config.build.productionSourceMap,
Extract:true
})
},

Devtool:config.build.productionSourceMap? ' #source-map ': false,
//Configure the output of the Webpack
Output: {
//Compile Output directory
Path:config.build.assetsRoot,
//Compile output file name format
Filename:utils.assetsPath (' js/[name].[ Chunkhash].js '),
///file name format with output name not specified
ChunkFilename:utils.assetsPath (' js/[id].[ Chunkhash].js ')
},

Configuring the Webpack Plugin

Plugins: [
Http://vuejs.github.io/vue-loader/en/workflow/production.html
New Webpack. Defineplugin ({
' Process.env ': env
}),

Smear compressed Code
New Webpack.optimize.UglifyJsPlugin ({
Compress: {
Warnings:false
},
Sourcemap:true
}),

Pulling away from CSS files
New Extracttextplugin ({
Filename:utils.assetsPath (' css/[name].[ Contenthash].css ')
}),

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
New Htmlwebpackplugin ({
Filename:process.env.NODE_ENV = = = ' Testing '

? ' Index.html '
: 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 Commonschunkplugin
Chunkssortmode: ' Dependency '
}),

Split vendor JS into its own file
New Webpack.optimize.CommonsChunkPlugin ({
Name: ' Vendor ',
Minchunks:function (module, count) {
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

New Webpack.optimize.CommonsChunkPlugin ({
Name: ' Manifest ',
Chunks: [' Vendor ']
})
]
})

Compression plug-in is required for compression in gzip mode
if (config.build.productionGzip) {
var compressionwebpackplugin = require (' Compression-webpack-plugin ')
WebpackConfig.plugins.push (
New Compressionwebpackplugin ({
Asset: ' [Path].gz[query] ',
Algorithm: ' gzip ',
Test:new RegExp (
‘\\. (' +
Config.build.productionGzipExtensions.join (' | ') +
') $ '
),

threshold:10240,
minratio:0.8
})
)
}

if (Config.build.bundleAnalyzerReport) {
var bundleanalyzerplugin = require (' Webpack-bundle-analyzer '). Bundleanalyzerplugin
WebpackConfig.plugins.push (New Bundleanalyzerplugin ())
}

Module.exports = Webpackconfig

Webpack.prod.conf.js