vue.config.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. const path = require('path')
  2. const rm = require('rimraf')
  3. // 监听打包完成
  4. const FileManagerPlugin = require('filemanager-webpack-plugin')
  5. const date = new Date()
  6. const y = date.getFullYear()
  7. const m = (date.getMonth() + 1).toString().padStart(2, '0')
  8. const d = date.getDate().toString().padStart(2, '0')
  9. const h = date.getHours().toString().padStart(2, '0')
  10. const timestamp = `?${y}${m}${d}${h}`
  11. const env = ['develop', undefined].includes(process.env.BUILD_ENV) ? require('./config/dev.env') : (process.env.BUILD_ENV === 'release' ? require('./config/release.env') : require('./config/prod.env'))
  12. const resolve = (dir) => {
  13. return path.join(__dirname, dir)
  14. }
  15. const addStyleResource = (rule) => {
  16. rule.use('style-resource')
  17. .loader('style-resources-loader')
  18. .options({
  19. patterns: [
  20. path.resolve(__dirname, './src/assets/styles/variable.scss')
  21. ]
  22. })
  23. }
  24. if (process.env.NODE_ENV !== 'development') {
  25. rm(resolve('./dist'), err => {
  26. if (err) throw err
  27. })
  28. }
  29. module.exports = {
  30. publicPath: '/',
  31. outputDir: './dist', // 构建文件目录,默认dist
  32. filenameHashing: false,
  33. productionSourceMap: process.env.BUILD_ENV === 'develop',
  34. devServer: {
  35. hot: true,
  36. hotOnly: true,
  37. host: '0.0.0.0',
  38. port: 8080,
  39. open: true,
  40. clientLogLevel: 'warning',
  41. // proxy: {
  42. // '/': {
  43. // target: 'https://ttyf-api.tbafhouse.com',
  44. // ws: true,
  45. // changeOrigin: true
  46. // }
  47. // },
  48. overlay: {
  49. warnings: true,
  50. errors: false
  51. },
  52. before (app) {
  53. }
  54. },
  55. configureWebpack: {
  56. resolve: {
  57. alias: {
  58. '@': resolve('src')
  59. }
  60. },
  61. output: {
  62. filename: 'js/[name].[hash].js' + timestamp,
  63. chunkFilename: 'js/[name].[hash].js' + timestamp
  64. },
  65. plugins: process.env.NODE_ENV !== 'development' ? [
  66. new FileManagerPlugin({
  67. onEnd: [
  68. {
  69. delete: ['./dist/*/favicon.ico', './dist/*/index.html']
  70. }
  71. ]
  72. })
  73. ] : [],
  74. performance: {
  75. hints: 'warning',
  76. // 入口起点的最大体积 整数类型(以字节为单位)
  77. maxEntrypointSize: 5000000,
  78. // 生成文件的最大体积 整数类型(以字节为单位 300k)
  79. maxAssetSize: 3000000,
  80. // 只给出 js 文件的性能提示
  81. assetFilter: function (assetFilename) {
  82. return assetFilename.endsWith('.js')
  83. }
  84. }
  85. },
  86. chainWebpack: config => {
  87. const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  88. types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  89. config.plugin('define').tap(args => {
  90. args[0]['process.env'] = Object.assign({}, args[0]['process.env'], env)
  91. return args
  92. })
  93. config.plugins.delete('preload')
  94. config.plugins.delete('prefetch')
  95. },
  96. css: process.env.NODE_ENV !== 'development' ? {
  97. extract: {
  98. filename: 'css/[name].[hash].css' + timestamp,
  99. chunkFilename: 'css/[name].[hash].css' + timestamp,
  100. ignoreOrder: true
  101. },
  102. sourceMap: false
  103. } : {}
  104. }