vue-多模块打包

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* eslint-disable no-useless-escape */
const path = require('path')
const glob = require('glob')
const projectname = process.argv[3]
console.log(projectname)
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
process.env.VUE_APP_VERSION = require('./package.json').version
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// 配置pages多页面获取当前文件夹下的html和js
function getEntry (globPath) {
  let entries = {}
  let basename
  let tmp
  let pathname
  // 多项目打包
  if (process.env.NODE_ENV === 'production') {
    entries = {
      index: {
        // page的入口
        entry: `src/pages/${projectname}/${projectname}.js`,
        // 模板来源
        template: `src/pages/${projectname}/${projectname}.html`,
        // 在 dist/index.html 的输出
        filename: 'index.html',
        title: projectname
        // chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
    console.log(entries)
  } else {
    glob.sync(globPath).forEach(function (entry) {
      basename = path.basename(entry, path.extname(entry))
      tmp = entry.split('/').splice(-3)
      pathname = basename // 正确输出js和html的路径

      entries[pathname] = {
        entry: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[1] + '.js',
        template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2],
        filename: tmp[2]
      }
    })
  }

  return entries
}
let htmls = getEntry('./src/pages/**/*.html')

// 配置end
module.exports = {
  productionSourceMap: false,
  publicPath: '/',
  outputDir: 'dist/' + projectname,
  pages: htmls,
  // 统一配置打包插件
  configureWebpack: config => {
    const options = {
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios'
      },
      resolve: {
        alias: {
          '@user': path.join(__dirname, './src/pages/user'),
          '@admin': path.join(__dirname, './src/pages/admin')
        }
      }
    }
    if (process.env.NODE_ENV === 'production') {
      return {
        ...options,
        plugins: [
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
            threshold: 10240, // 对10K以上的数据进行压缩
            minRatio: 0.8,
            // 删除源文件, 配合webpack-bundle-analyzer时不能删除源文件，且需要配置静态服务器
            deleteOriginalAssets: true // 是否删除源文件
          })
          // new BundleAnalyzerPlugin()
        ]
      }
    } else {
      return options
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改它的选项...
        options.limit = 10000
        return options
      })
    if (process.env.NODE_ENV === 'production') {
      const fonts = config.module.rule('fonts')
      fonts
        .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          options = {
            limit: 10000,
            name: '[name].[ext]',
            //            publicPath: `http:${cdnPath}/fonts`,
            publicPath: '/fonts',
            outputPath: 'font/'
          }
          return options
        })
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置全局less变量自动引入，不用每次再手动引入
        path.join(__dirname, 'src/iview-theme/index.less')
      ]
    },
    optimization: {
      moduleIds: 'deterministic',
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            minChunkSize: 10000
          }
        }
      }
    }
  }
}