webpack.prod.conf.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. var path = require('path')
  2. var utils = require('./utils')
  3. var webpack = require('webpack')
  4. var config = require('../config')
  5. var merge = require('webpack-merge')
  6. var baseWebpackConfig = require('./webpack.base.conf')
  7. var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  8. var CopyWebpackPlugin = require('copy-webpack-plugin')
  9. // var HtmlWebpackPlugin = require('html-webpack-plugin')
  10. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  11. var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  12. var env = config.build.env
  13. var webpackConfig = merge(baseWebpackConfig, {
  14. module: {
  15. rules: utils.styleLoaders({
  16. sourceMap: config.build.productionSourceMap,
  17. extract: true
  18. })
  19. },
  20. devtool: config.build.productionSourceMap ? '#source-map' : false,
  21. output: {
  22. path: config.build.assetsRoot,
  23. // filename: utils.assetsPath('[name].[chunkhash].js'),
  24. // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
  25. filename: utils.assetsPath('[name].js'),
  26. chunkFilename: utils.assetsPath('[id].js')
  27. },
  28. plugins: [
  29. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  30. new webpack.DefinePlugin({
  31. 'process.env': env
  32. }),
  33. new UglifyJsPlugin({
  34. sourceMap: true
  35. }),
  36. // extract css into its own file
  37. new ExtractTextPlugin({
  38. // filename: utils.assetsPath('[name].[contenthash].css')
  39. filename: utils.assetsPath(`[name].${config.build.fileExt.style}`)
  40. }),
  41. // Compress extracted CSS. We are using this plugin so that possible
  42. // duplicated CSS from different components can be deduped.
  43. new OptimizeCSSPlugin({
  44. cssProcessorOptions: {
  45. safe: true
  46. }
  47. }),
  48. // generate dist index.html with correct asset hash for caching.
  49. // you can customize output by editing /index.html
  50. // see https://github.com/ampedandwired/html-webpack-plugin
  51. // new HtmlWebpackPlugin({
  52. // filename: config.build.index,
  53. // template: 'index.html',
  54. // inject: true,
  55. // minify: {
  56. // removeComments: true,
  57. // collapseWhitespace: true,
  58. // removeAttributeQuotes: true
  59. // // more options:
  60. // // https://github.com/kangax/html-minifier#options-quick-reference
  61. // },
  62. // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  63. // chunksSortMode: 'dependency'
  64. // }),
  65. // keep module.id stable when vender modules does not change
  66. new webpack.HashedModuleIdsPlugin(),
  67. // split vendor js into its own file
  68. new webpack.optimize.CommonsChunkPlugin({
  69. name: 'common/vendor',
  70. minChunks: function (module, count) {
  71. // any required modules inside node_modules are extracted to vendor
  72. return (
  73. module.resource &&
  74. /\.js$/.test(module.resource) &&
  75. module.resource.indexOf('node_modules') >= 0
  76. ) || count > 1
  77. }
  78. }),
  79. // extract webpack runtime and module manifest to its own file in order to
  80. // prevent vendor hash from being updated whenever app bundle is updated
  81. new webpack.optimize.CommonsChunkPlugin({
  82. name: 'common/manifest',
  83. chunks: ['common/vendor']
  84. })
  85. ]
  86. })
  87. // if (config.build.productionGzip) {
  88. // var CompressionWebpackPlugin = require('compression-webpack-plugin')
  89. // webpackConfig.plugins.push(
  90. // new CompressionWebpackPlugin({
  91. // asset: '[path].gz[query]',
  92. // algorithm: 'gzip',
  93. // test: new RegExp(
  94. // '\\.(' +
  95. // config.build.productionGzipExtensions.join('|') +
  96. // ')$'
  97. // ),
  98. // threshold: 10240,
  99. // minRatio: 0.8
  100. // })
  101. // )
  102. // }
  103. if (config.build.bundleAnalyzerReport) {
  104. var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  105. webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  106. }
  107. module.exports = webpackConfig