webpack.prod.conf.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. 'use strict'
  2. const path = require('path')
  3. const utils = require('./utils')
  4. const webpack = require('webpack')
  5. const config = require('../config')
  6. const merge = require('webpack-merge')
  7. const baseWebpackConfig = require('./webpack.base.conf')
  8. const CopyWebpackPlugin = require('copy-webpack-plugin')
  9. const HtmlWebpackPlugin = require('html-webpack-plugin')
  10. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  11. const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  12. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  13. const env = process.env.NODE_ENV === 'testing'
  14. ? require('../config/test.env')
  15. : require('../config/prod.env')
  16. const webpackConfig = merge(baseWebpackConfig, {
  17. module: {
  18. rules: utils.styleLoaders({
  19. sourceMap: config.build.productionSourceMap,
  20. extract: true,
  21. usePostCSS: true
  22. })
  23. },
  24. devtool: config.build.productionSourceMap ? config.build.devtool : false,
  25. output: {
  26. path: config.build.assetsRoot,
  27. filename: utils.assetsPath('js/[name].js'),
  28. chunkFilename: utils.assetsPath('js/[id].js')
  29. },
  30. plugins: [
  31. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  32. new webpack.DefinePlugin({
  33. 'process.env': env
  34. }),
  35. new UglifyJsPlugin({
  36. uglifyOptions: {
  37. compress: {
  38. warnings: false
  39. }
  40. },
  41. sourceMap: config.build.productionSourceMap,
  42. parallel: true
  43. }),
  44. // extract css into its own file
  45. new ExtractTextPlugin({
  46. filename: utils.assetsPath('css/[name].css'),
  47. // set the following option to `true` if you want to extract CSS from
  48. // codesplit chunks into this main css file as well.
  49. // This will result in *all* of your app's CSS being loaded upfront.
  50. allChunks: false
  51. }),
  52. // Compress extracted CSS. We are using this plugin so that possible
  53. // duplicated CSS from different components can be deduped.
  54. new OptimizeCSSPlugin({
  55. cssProcessorOptions: config.build.productionSourceMap
  56. ? { safe: true, map: { inline: false } }
  57. : { safe: true }
  58. }),
  59. // generate dist index.html with correct asset hash for caching.
  60. // you can customize output by editing /index.html
  61. // see https://github.com/ampedandwired/html-webpack-plugin
  62. new HtmlWebpackPlugin({
  63. filename: process.env.NODE_ENV === 'testing'
  64. ? 'index.html'
  65. : config.build.index,
  66. template: 'index.html',
  67. inject: false,
  68. minify: {
  69. removeComments: true,
  70. collapseWhitespace: true,
  71. removeAttributeQuotes: true
  72. // more options:
  73. // https://github.com/kangax/html-minifier#options-quick-reference
  74. },
  75. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  76. chunksSortMode: 'dependency'
  77. }),
  78. // keep module.id stable when vender modules does not change
  79. new webpack.HashedModuleIdsPlugin(),
  80. // enable scope hoisting
  81. new webpack.optimize.ModuleConcatenationPlugin(),
  82. // split vendor js into its own file
  83. new webpack.optimize.CommonsChunkPlugin({
  84. name: 'vendor',
  85. minChunks (module) {
  86. // any required modules inside node_modules are extracted to vendor
  87. return (
  88. module.resource &&
  89. /\.js$/.test(module.resource) &&
  90. module.resource.indexOf(
  91. path.join(__dirname, '../node_modules')
  92. ) === 0
  93. )
  94. }
  95. }),
  96. // extract webpack runtime and module manifest to its own file in order to
  97. // prevent vendor hash from being updated whenever app bundle is updated
  98. new webpack.optimize.CommonsChunkPlugin({
  99. name: 'manifest',
  100. minChunks: Infinity
  101. }),
  102. // This instance extracts shared chunks from code splitted chunks and bundles them
  103. // in a separate chunk, similar to the vendor chunk
  104. // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
  105. new webpack.optimize.CommonsChunkPlugin({
  106. name: 'app',
  107. async: 'vendor-async',
  108. children: true,
  109. minChunks: 3
  110. }),
  111. // copy custom static assets
  112. new CopyWebpackPlugin([
  113. {
  114. from: path.resolve(__dirname, '../static'),
  115. to: config.build.assetsSubDirectory,
  116. ignore: ['.*']
  117. }
  118. ])
  119. ]
  120. })
  121. if (config.build.productionGzip) {
  122. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  123. webpackConfig.plugins.push(
  124. new CompressionWebpackPlugin({
  125. asset: '[path].gz[query]',
  126. algorithm: 'gzip',
  127. test: new RegExp(
  128. '\\.(' +
  129. config.build.productionGzipExtensions.join('|') +
  130. ')$'
  131. ),
  132. threshold: 10240,
  133. minRatio: 0.8
  134. })
  135. )
  136. }
  137. if (config.build.bundleAnalyzerReport) {
  138. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  139. webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))
  140. }
  141. module.exports = webpackConfig