webpack.prod.conf.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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 HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  14. const env = process.env.NODE_ENV === 'testing'
  15. ? require('../config/test.env')
  16. : require('../config/prod.env')
  17. const webpackConfig = merge(baseWebpackConfig, {
  18. module: {
  19. rules: utils.styleLoaders({
  20. sourceMap: config.build.productionSourceMap,
  21. extract: true,
  22. usePostCSS: true
  23. })
  24. },
  25. devtool: config.build.productionSourceMap ? config.build.devtool : false,
  26. output: {
  27. path: config.build.assetsRoot,
  28. filename: utils.assetsPath('js/[name].[hash].js'),
  29. chunkFilename: utils.assetsPath('js/[id].[hash].js')
  30. },
  31. plugins: [
  32. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  33. new webpack.DefinePlugin({
  34. 'process.env': env
  35. }),
  36. // new webpack.DllReferencePlugin({
  37. // context: __dirname,
  38. // manifest: require('./vendor-manifest.json')
  39. // }),
  40. new UglifyJsPlugin({
  41. uglifyOptions: {
  42. compress: {
  43. warnings: false,
  44. drop_console: true
  45. },
  46. output: {
  47. comments: false
  48. }
  49. },
  50. sourceMap: config.build.productionSourceMap,
  51. parallel: true,
  52. cache:true,
  53. }),
  54. // extract css into its own file
  55. new ExtractTextPlugin({
  56. filename: utils.assetsPath('css/[name].[hash].css'),
  57. // Setting the following option to `false` will not extract CSS from codesplit chunks.
  58. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
  59. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
  60. // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
  61. allChunks: true,
  62. }),
  63. // Compress extracted CSS. We are using this plugin so that possible
  64. // duplicated CSS from different components can be deduped.
  65. new OptimizeCSSPlugin({
  66. cssProcessorOptions: config.build.productionSourceMap
  67. ? { safe: true, map: { inline: false } }
  68. : { safe: true }
  69. }),
  70. // generate dist index.html with correct asset hash for caching.
  71. // you can customize output by editing /index.html
  72. // see https://github.com/ampedandwired/html-webpack-plugin
  73. new HtmlWebpackPlugin({
  74. filename: process.env.NODE_ENV === 'testing'
  75. ? 'index.html'
  76. : config.build.index,
  77. template: 'index.html',
  78. inject: true,
  79. minify: {
  80. removeComments: true,
  81. collapseWhitespace: true,
  82. removeAttributeQuotes: true
  83. // more options:
  84. // https://github.com/kangax/html-minifier#options-quick-reference
  85. },
  86. chunks: [], // 不指定则引入所有chunk,[]则是不引入chunk
  87. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  88. chunksSortMode: 'dependency'
  89. }),
  90. // keep module.id stable when vendor modules does not change
  91. new webpack.HashedModuleIdsPlugin(),
  92. // enable scope hoisting
  93. new webpack.optimize.ModuleConcatenationPlugin(),
  94. // split vendor js into its own file
  95. new webpack.optimize.CommonsChunkPlugin({
  96. name: 'vendor',
  97. minChunks (module) {
  98. // any required modules inside node_modules are extracted to vendor
  99. return (
  100. module.resource &&
  101. /\.js$/.test(module.resource) &&
  102. module.resource.indexOf(
  103. path.join(__dirname, '../node_modules')
  104. ) === 0
  105. )
  106. }
  107. }),
  108. // extract webpack runtime and module manifest to its own file in order to
  109. // prevent vendor hash from being updated whenever app bundle is updated
  110. new webpack.optimize.CommonsChunkPlugin({
  111. name: 'manifest',
  112. minChunks: Infinity
  113. }),
  114. // This instance extracts shared chunks from code splitted chunks and bundles them
  115. // in a separate chunk, similar to the vendor chunk
  116. // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
  117. // new webpack.optimize.CommonsChunkPlugin({
  118. // name: 'app',
  119. // async: 'vendor-async',
  120. // children: true,
  121. // minChunks: 3
  122. // }),
  123. // copy custom static assets
  124. new CopyWebpackPlugin([
  125. {
  126. from: path.resolve(__dirname, '../static'),
  127. to: config.build.assetsSubDirectory,
  128. ignore: ['.*']
  129. }
  130. ])
  131. ].concat(utils.htmlPlugins())
  132. })
  133. // let _preview = new HtmlWebpackPlugin({
  134. // entry: {
  135. // preview: path.resolve(__dirname, '../src/components/icoreForm/views/preview/main.js')
  136. // },
  137. // template: 'public/preview.html',
  138. // filename: 'preview.html',
  139. // inject: true,
  140. // chunk: ['chunk-vendors', 'chunk-common', 'preview']
  141. // })
  142. // webpackConfig.plugins.push(_preview)
  143. if (config.build.productionGzip) {
  144. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  145. webpackConfig.plugins.push(
  146. new CompressionWebpackPlugin({
  147. asset: '[path].gz[query]',
  148. algorithm: 'gzip',
  149. test: new RegExp(
  150. '\\.(' +
  151. config.build.productionGzipExtensions.join('|') +
  152. ')$'
  153. ),
  154. threshold: 10240,
  155. minRatio: 0.8
  156. })
  157. )
  158. }
  159. if (config.build.bundleAnalyzerReport) {
  160. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  161. webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  162. }
  163. module.exports = webpackConfig