邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

182 rivejä
4.9 KiB

  1. // const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  2. const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩js
  3. const imageWebpackLoader = require('image-webpack-loader');//压缩图片
  4. const path = require('path');
  5. const resolve = dir => {
  6. return path.join(__dirname, dir)
  7. }
  8. let timeStamp = new Date().getTime();
  9. let externals = {}
  10. let cdn = { css: [], js: [] }
  11. // const isProduction = process.env.VUE_APP_ENV == 'production' // 判断是否是生产环境
  12. const isProduction = true
  13. if (isProduction) {
  14. externals = {
  15. /**
  16. * externals 对象属性解析:
  17. * '包名' : '在项目中引入的名字'
  18. */
  19. 'vue': 'Vue',
  20. 'vant': 'vant',
  21. 'element-ui': 'ELEMENT',
  22. // 'vuex': 'Vuex',
  23. // 'vue-router': 'VueRouter',
  24. }
  25. cdn = {
  26. css: [
  27. 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
  28. ],
  29. js: [
  30. // vue must at first!
  31. 'https://unpkg.com/vue@2.6.11/dist/vue.js', // vuejs
  32. 'https://unpkg.com/vant@2.12.48/lib/vant.min.js', //vant
  33. 'https://unpkg.com/element-ui@2.15.12/lib/index.js', // element-ui js
  34. // 'https://cdn.bootcdn.net/ajax/libs/vuex/3.4.0/vuex.global.min.js',//vuex
  35. // 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.global.min.js',//vue-router
  36. ]
  37. }
  38. }
  39. module.exports = {
  40. configureWebpack: {
  41. output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
  42. filename: `js/js[name].${timeStamp}.js`,
  43. chunkFilename: `js/chunk.[id].${timeStamp}.js`,
  44. },
  45. resolve: {
  46. alias: {
  47. '@': path.resolve(__dirname, 'src')
  48. }
  49. },
  50. externals,
  51. },
  52. css: {
  53. extract: { // 打包后css文件名称添加时间戳
  54. filename: `css/[name].${timeStamp}.css`,
  55. chunkFilename: `css/chunk.[id].${timeStamp}.css`,
  56. },
  57. loaderOptions: {
  58. css: {
  59. },
  60. // postcss: {
  61. // // options here will be passed to postcss-loader
  62. // plugins: [require('postcss-px2rem')({
  63. // remUnit: 75
  64. // })]
  65. // }
  66. }
  67. },
  68. pwa: {
  69. iconPaths: {
  70. favicon32: 'favicon.ico',
  71. favicon16: 'favicon.ico',
  72. appleTouchIcon: 'favicon.ico',
  73. maskIcon: 'favicon.ico',
  74. msTileImage: 'favicon.ico'
  75. }
  76. },
  77. //http://www.metavatar.cc/
  78. devServer: {
  79. overlay: {
  80. warnings: false,
  81. errors: false
  82. },
  83. proxy: {
  84. '/api': {
  85. // target: 'https://smapitestmalls,iformall.com/C/api',
  86. target: process.env.VUE_APP_API_ROOT + '/api',
  87. changeOrigin: true,
  88. pathRewrite: {
  89. '^/api': ''
  90. },
  91. },
  92. }
  93. },
  94. lintOnSave: false,
  95. publicPath: './', // 打包后引用的资源路径
  96. chainWebpack: config => {
  97. // favicon图标
  98. config.plugin('html').tap(args => {
  99. args[0].favicon = './public/favicon.ico';
  100. return args;
  101. });
  102. // 注入cdn变量 (打包时会执行)
  103. config.plugin('html').tap(args => {
  104. args[0].cdn = cdn // 配置cdn给插件
  105. return args
  106. })
  107. // 图片路径
  108. config.module.rule('images')
  109. .use('url-loader')
  110. .tap(options => ({
  111. name: './assets/images/[name].[ext]',
  112. quality: 85,
  113. limit: 0,
  114. esModule: false,
  115. }))
  116. //图片压缩
  117. config.module
  118. .rule('images')
  119. .use('image-webpack-loader')
  120. .loader('image-webpack-loader')
  121. .options({
  122. mozjpeg: {
  123. progressive: true,
  124. quality: 65
  125. },
  126. optipng: {
  127. enabled: false
  128. },
  129. pngquant: {
  130. quality: [0.65, 0.9],
  131. speed: 4
  132. },
  133. gifsicle: {
  134. interlaced: false
  135. },
  136. webp: {
  137. quality: 75
  138. }
  139. })
  140. .end();
  141. // 压缩js,只能线上,本地会js访问错误,会将js压缩成.gz文件
  142. if (process.env.VUE_APP_ENV != 'development') {
  143. config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({
  144. test: /\.(js|css|scss|woff|woff2|ttf)$/, // 匹配文件名
  145. threshold: 20480, // 对超过20k的数据压缩
  146. minRatio: 0.8,
  147. deleteOriginalAssets: true // 删除源文件
  148. }))
  149. // 压缩字体
  150. // config.module.rule('fonts').use('url-loader')
  151. // .tap(options => {
  152. // options.limit=8192;
  153. // options.name='[name].[ext]';
  154. // return options;
  155. // });
  156. // config.plugin('compression').use(CompressionWebpackPlugin);
  157. }
  158. }
  159. // configureWebpack: {
  160. // plugins: [
  161. // //打包环境去掉console.log
  162. // new UglifyJsPlugin({
  163. // uglifyOptions: {
  164. // compress: {
  165. // drop_console: true, //注释console
  166. // drop_debugger: true, //注释debugger
  167. // pure_funcs: ['console.log'], //移除console.log
  168. // },
  169. // },
  170. // }),
  171. // ],
  172. // }
  173. }