webpack.prod.config.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. const webpack = require('webpack');
  2. const merge = require('webpack-merge');
  3. const path = require('path');
  4. const base = require('./webpack.base.config');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  6. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  7. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  8. let output = {
  9. path : path.resolve(__dirname, `../build`),
  10. publicPath : `build/`,
  11. filename : 'bundle/[name].bundle.js?[hash]',
  12. chunkFilename : 'chunk/[name].chunk.js?[hash]'
  13. }
  14. let plugins = [
  15. new webpack.DefinePlugin({
  16. 'process.env': {
  17. NODE_ENV: JSON.stringify("production")
  18. }
  19. }),
  20. new HtmlWebpackPlugin({
  21. filename: '../index.html',
  22. template: './index.ejs',
  23. inject: 'body',
  24. minify: {
  25. html5: false,
  26. removeComments: true,
  27. removeEmptyAttributes: true,
  28. collapseWhitespace: true
  29. }
  30. }),
  31. new MiniCssExtractPlugin({
  32. filename: "css/[name].css?[hash]",
  33. chunkFilename: "css/[name].css?[hash]"
  34. })
  35. ]
  36. module.exports = merge(base, {
  37. // devtool: 'source-map',
  38. output: output,
  39. plugins: plugins,
  40. module: {
  41. rules: [{
  42. test: /\.css$/,
  43. use: [
  44. 'vue-style-loader',
  45. MiniCssExtractPlugin.loader,
  46. 'css-loader'
  47. ]
  48. }],
  49. },
  50. optimization: {
  51. runtimeChunk: {
  52. name: 'manifest'
  53. },
  54. splitChunks: {
  55. chunks: 'async',
  56. minSize: 30000,
  57. minChunks: 1,
  58. maxAsyncRequests: 5,
  59. maxInitialRequests: 3,
  60. name: false,
  61. cacheGroups: {
  62. vendor: {
  63. name: 'vendor',
  64. chunks: 'initial',
  65. priority: -10,
  66. reuseExistingChunk: false,
  67. test: /node_modules\/(.*)\.js/
  68. },
  69. // styles: {
  70. // name: 'styles',
  71. // test: /\.(scss|css)$/,
  72. // chunks: 'all',
  73. // minChunks: 1,
  74. // reuseExistingChunk: true,
  75. // enforce: true
  76. // }
  77. }
  78. }
  79. }
  80. });