webpack.prod.conf.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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 CopyWebpackPlugin = require('copy-webpack-plugin')
  8. var HtmlWebpackPlugin = require('html-webpack-plugin')
  9. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  10. var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  11. const ParallelUglifyPlugin = require('webpack-parallel-uglify-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('js/[name].[chunkhash].js'),
  24. chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  25. },
  26. plugins: [
  27. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  28. new webpack.DefinePlugin({
  29. 'process.env': env
  30. }),
  31. new ParallelUglifyPlugin({
  32. // 传递给 UglifyJS的参数如下:
  33. uglifyJS: {
  34. output: {
  35. beautify: false,
  36. comments: false
  37. },
  38. warnings: false,
  39. }
  40. }),
  41. // extract css into its own file
  42. new ExtractTextPlugin({
  43. filename: utils.assetsPath('css/[name].[contenthash].css')
  44. }),
  45. // Compress extracted CSS. We are using this plugin so that possible
  46. // duplicated CSS from different components can be deduped.
  47. new OptimizeCSSPlugin({
  48. cssProcessorOptions: {
  49. safe: true
  50. }
  51. }),
  52. // generate dist index.html with correct asset hash for caching.
  53. // you can customize output by editing /index.html
  54. // see https://github.com/ampedandwired/html-webpack-plugin
  55. new HtmlWebpackPlugin({
  56. filename: config.build.index,
  57. template: 'index.html',
  58. inject: true,
  59. minify: {
  60. removeComments: true,
  61. collapseWhitespace: true,
  62. removeAttributeQuotes: true
  63. // more options:
  64. // https://github.com/kangax/html-minifier#options-quick-reference
  65. },
  66. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  67. chunksSortMode: 'dependency'
  68. }),
  69. // split vendor js into its own file
  70. // new webpack.optimize.CommonsChunkPlugin({
  71. // name: 'vendor',
  72. // minChunks: function (module, count) {
  73. // // any required modules inside node_modules are extracted to vendor
  74. // return (
  75. // module.resource &&
  76. // /\.js$/.test(module.resource) &&
  77. // module.resource.indexOf(
  78. // path.join(__dirname, '../node_modules')
  79. // ) === 0
  80. // )
  81. // }
  82. // }),
  83. // extract webpack runtime and module manifest to its own file in order to
  84. // prevent vendor hash from being updated whenever app bundle is updated
  85. // new webpack.optimize.CommonsChunkPlugin({
  86. // name: 'manifest',
  87. // chunks: ['vendor']
  88. // }),
  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. })
  99. if (config.build.bundleAnalyzerReport) {
  100. var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  101. webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  102. }
  103. module.exports = webpackConfig