webpack.prod.conf.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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 ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
  11. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  12. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  13. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  14. function resolve(dir) {
  15. return path.join(__dirname, '..', dir)
  16. }
  17. const env = require('../config/prod.env')
  18. // For NamedChunksPlugin
  19. const seen = new Set()
  20. const nameLength = 4
  21. const webpackConfig = merge(baseWebpackConfig, {
  22. mode: 'production',
  23. module: {
  24. rules: utils.styleLoaders({
  25. sourceMap: config.build.productionSourceMap,
  26. extract: true,
  27. usePostCSS: true
  28. })
  29. },
  30. devtool: config.build.productionSourceMap ? config.build.devtool : false,
  31. output: {
  32. path: config.build.assetsRoot,
  33. filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
  34. chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
  35. },
  36. plugins: [
  37. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  38. new webpack.DefinePlugin({
  39. 'process.env': env
  40. }),
  41. // extract css into its own file
  42. new MiniCssExtractPlugin({
  43. filename: utils.assetsPath('css/[name].[contenthash:8].css'),
  44. chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
  45. }),
  46. // generate dist index.html with correct asset hash for caching.
  47. // you can customize output by editing /index.html
  48. // see https://github.com/ampedandwired/html-webpack-plugin
  49. new HtmlWebpackPlugin({
  50. filename: config.build.index,
  51. template: 'index.html',
  52. inject: true,
  53. favicon: resolve('favicon.ico'),
  54. title: 'vue-admin-template',
  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. // default sort mode uses toposort which cannot handle cyclic deps
  63. // in certain cases, and in webpack 4, chunk order in HTML doesn't
  64. // matter anyway
  65. }),
  66. new ScriptExtHtmlWebpackPlugin({
  67. //`runtime` must same as runtimeChunk name. default is `runtime`
  68. inline: /runtime\..*\.js$/
  69. }),
  70. // keep chunk.id stable when chunk has no name
  71. new webpack.NamedChunksPlugin(chunk => {
  72. if (chunk.name) {
  73. return chunk.name
  74. }
  75. const modules = Array.from(chunk.modulesIterable)
  76. if (modules.length > 1) {
  77. const hash = require('hash-sum')
  78. const joinedHash = hash(modules.map(m => m.id).join('_'))
  79. let len = nameLength
  80. while (seen.has(joinedHash.substr(0, len))) len++
  81. seen.add(joinedHash.substr(0, len))
  82. return `chunk-${joinedHash.substr(0, len)}`
  83. } else {
  84. return modules[0].id
  85. }
  86. }),
  87. // keep module.id stable when vender modules does not change
  88. new webpack.HashedModuleIdsPlugin(),
  89. // copy custom static assets
  90. new CopyWebpackPlugin([
  91. {
  92. from: path.resolve(__dirname, '../static'),
  93. to: config.build.assetsSubDirectory,
  94. ignore: ['.*']
  95. }
  96. ])
  97. ],
  98. optimization: {
  99. splitChunks: {
  100. chunks: 'all',
  101. cacheGroups: {
  102. libs: {
  103. name: 'chunk-libs',
  104. test: /[\\/]node_modules[\\/]/,
  105. priority: 10,
  106. chunks: 'initial' // 只打包初始时依赖的第三方
  107. },
  108. elementUI: {
  109. name: 'chunk-elementUI', // 单独将 elementUI 拆包
  110. priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
  111. test: /[\\/]node_modules[\\/]element-ui[\\/]/
  112. }
  113. }
  114. },
  115. runtimeChunk: 'single',
  116. minimizer: [
  117. new UglifyJsPlugin({
  118. uglifyOptions: {
  119. mangle: {
  120. safari10: true
  121. }
  122. },
  123. sourceMap: config.build.productionSourceMap,
  124. cache: true,
  125. parallel: true
  126. }),
  127. // Compress extracted CSS. We are using this plugin so that possible
  128. // duplicated CSS from different components can be deduped.
  129. new OptimizeCSSAssetsPlugin()
  130. ]
  131. }
  132. })
  133. if (config.build.productionGzip) {
  134. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  135. webpackConfig.plugins.push(
  136. new CompressionWebpackPlugin({
  137. asset: '[path].gz[query]',
  138. algorithm: 'gzip',
  139. test: new RegExp(
  140. '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
  141. ),
  142. threshold: 10240,
  143. minRatio: 0.8
  144. })
  145. )
  146. }
  147. if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
  148. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  149. .BundleAnalyzerPlugin
  150. if (config.build.bundleAnalyzerReport) {
  151. webpackConfig.plugins.push(
  152. new BundleAnalyzerPlugin({
  153. analyzerPort: 8080,
  154. generateStatsFile: false
  155. })
  156. )
  157. }
  158. if (config.build.generateAnalyzerReport) {
  159. webpackConfig.plugins.push(
  160. new BundleAnalyzerPlugin({
  161. analyzerMode: 'static',
  162. reportFilename: 'bundle-report.html',
  163. openAnalyzer: false
  164. })
  165. )
  166. }
  167. }
  168. module.exports = webpackConfig