webpack.prod.conf.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. var path = require('path')
  2. var config = require('../config')
  3. var utils = require('./utils')
  4. var webpack = require('webpack')
  5. var merge = require('webpack-merge')
  6. var baseWebpackConfig = require('./webpack.base.conf')
  7. var MiniCssExtractPlugin = require('mini-css-extract-plugin')
  8. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
  9. var HtmlWebpackPlugin = require('html-webpack-plugin')
  10. var env = process.env.NODE_ENV === 'testing'
  11. ? require('../config/test.env')
  12. : config.build.env
  13. let commitHash = (() => {
  14. const subst = "$Format:%h$";
  15. if(!subst.match(/Format:/)) {
  16. return subst;
  17. } else {
  18. return require('child_process')
  19. .execSync('git rev-parse --short HEAD')
  20. .toString();
  21. }
  22. })();
  23. var webpackConfig = merge(baseWebpackConfig, {
  24. mode: 'production',
  25. module: {
  26. rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
  27. },
  28. devtool: config.build.productionSourceMap ? 'source-map' : false,
  29. optimization: {
  30. minimize: true,
  31. splitChunks: {
  32. chunks: 'all'
  33. },
  34. minimizer: [
  35. `...`,
  36. new CssMinimizerPlugin()
  37. ]
  38. },
  39. output: {
  40. path: config.build.assetsRoot,
  41. filename: utils.assetsPath('js/[name].[chunkhash].js'),
  42. chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
  43. },
  44. plugins: [
  45. // http://vuejs.github.io/vue-loader/workflow/production.html
  46. new webpack.DefinePlugin({
  47. 'process.env': env,
  48. 'COMMIT_HASH': JSON.stringify(commitHash),
  49. 'DEV_OVERRIDES': JSON.stringify(undefined),
  50. '__VUE_OPTIONS_API__': true,
  51. '__VUE_PROD_DEVTOOLS__': false
  52. }),
  53. // extract css into its own file
  54. new MiniCssExtractPlugin({
  55. filename: utils.assetsPath('css/[name].[contenthash].css')
  56. }),
  57. // generate dist index.html with correct asset hash for caching.
  58. // you can customize output by editing /index.html
  59. // see https://github.com/ampedandwired/html-webpack-plugin
  60. new HtmlWebpackPlugin({
  61. filename: process.env.NODE_ENV === 'testing'
  62. ? 'index.html'
  63. : config.build.index,
  64. template: 'index.html',
  65. inject: true,
  66. minify: {
  67. removeComments: true,
  68. collapseWhitespace: true,
  69. removeAttributeQuotes: true,
  70. ignoreCustomComments: [/server-generated-meta/]
  71. // more options:
  72. // https://github.com/kangax/html-minifier#options-quick-reference
  73. }
  74. }),
  75. // split vendor js into its own file
  76. // extract webpack runtime and module manifest to its own file in order to
  77. // prevent vendor hash from being updated whenever app bundle is updated
  78. // new webpack.optimize.SplitChunksPlugin({
  79. // name: ['app', 'vendor']
  80. // }),
  81. ]
  82. })
  83. if (config.build.productionGzip) {
  84. var CompressionWebpackPlugin = require('compression-webpack-plugin')
  85. webpackConfig.plugins.push(
  86. new CompressionWebpackPlugin({
  87. asset: '[path].gz[query]',
  88. algorithm: 'gzip',
  89. test: new RegExp(
  90. '\\.(' +
  91. config.build.productionGzipExtensions.join('|') +
  92. ')$'
  93. ),
  94. threshold: 10240,
  95. minRatio: 0.8
  96. })
  97. )
  98. }
  99. module.exports = webpackConfig