123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- const fs = require('fs')
- const path = require('path')
- const webpack = require('webpack')
- const createThemeColorReplacerPlugin = require('./config/plugin.config')
- // gzip 压缩
- const compressionWebpackPlugin = require('compression-webpack-plugin')
- // js,css 压缩
- const TerserPlugin = require('terser-webpack-plugin')
- // 版本自动生�
- const WebpackVersionPlugin = require('webpack-version-plugin')
- const versionConfig = require(resolve('public/version.json'))
- function resolve (dir) {
- return path.join(__dirname, dir)
- }
- /**
- * check production or preview(pro.loacg.com only)
- * @returns {boolean}
- */
- function isProd () {
- return process.env.NODE_ENV === 'production'
- }
- // 项目部署基础
- // 默认情况下,我们å�‡è®¾ä½ çš„åº”ç”¨å°†è¢«éƒ¨ç½²åœ¨åŸŸçš„æ ¹ç›®å½•ä¸„1¤7
- // 例如:https://www.my-app.com/
- // 默认$1¤7/'
- // 如果您的应用程åº�部署在å�路径ä¸ï¼Œåˆ™éœ€è¦�在这指定å�路径
- // 例如:https://www.foobar.com/my-app/
- // 霄1¤7è¦�将它改丄1¤7/my-app/'
- const BASE_URL = isProd ? '/' : '/'
- const assetsCDN = {
- css: [],
- // https://unpkg.com/browse/vue@2.6.10/
- js: [
- BASE_URL + 'js/vue.min.js',
- BASE_URL + 'js/vue-router.min.js',
- BASE_URL + 'js/vuex.min.js',
- BASE_URL + 'js/axios.min.js',
- BASE_URL + 'js/echarts.min.js'
- ]
- }
- // webpack build externals
- const prodExternals = {
- vue: 'Vue',
- 'vue-router': 'VueRouter',
- vuex: 'Vuex',
- axios: 'axios',
- echarts: 'echarts',
- // lodash : {
- // commonjs: "lodash",
- // amd: "lodash",
- // root: "_" // indicates global variable
- // },
- 'mockjs2': 'Mock'
- }
- // vue.config.js
- const vueConfig = {
- runtimeCompiler: true, // 动æ„1¤7�编译组仄1¤7
- publicPath: BASE_URL,
- configureWebpack: {
- optimization: isProd() ? {
- minimize: true,
- minimizer: [new TerserPlugin({
- test: /\.js(\?.*)?$/i, // 匹é…�å�‚与压缩的文仄1¤7
- parallel: true, // 使用多进程并å�‘è¿�è¡„1¤7
- terserOptions: { // Terser 压缩�置
- output: { comments: false },
- compress: {// consoleåˆ é™¤
- pure_funcs: ['console.log']
- }
- },
- extractComments: true // 将注释剥离到å�•独的文件ä¸
- })]
- } : {},
- // webpack plugins
- plugins: [
- // Ignore all locale files of moment.js
- new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
- new compressionWebpackPlugin({
- // [file] 会被替æ�¢æˆ�原始资æº�ã„1¤7‚[path] 会被替æ�¢æˆ�原始资æº�的路径$1¤7[query] 会被替æ�¢æˆ�查询å—符串。默认å„1¤7¼æ˜¯ "[path].gz[query]"〄1¤7
- filename: '[path].gz[query]', // �示compression-webpack-plugin@3.0.0的�asset改为filename
- // å�¯ä»¥æ˜„1¤7function(buf, callback) 或è„1¤7…å—符串。对于å—符串æ�¥è¯´ä¾�ç…§ zlib 的算泄1¤7或è„1¤7„1¤7zopfli 的算泄1¤7。默认å„1¤7¼æ˜¯ "gzip"〄1¤7
- algorithm: 'gzip',
- // 扄1¤7有匹é…�该æ£åˆ™çš„资æº�都会被处ç�†ã€‚默认å„1¤7¼æ˜¯å…¨éƒ¨èµ„æº�〄1¤7
- test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
- // å�ªæœ‰å¤§å°�大于该å„1¤7¼çš„资æº�会被处ç�†ã€‚å�•ä½�是 bytes。默认å„1¤7¼æ˜¯ 0〄1¤7
- threshold: 10240,
- // å�ªæœ‰åŽ‹ç¼©çŽ‡å°�于这个å„1¤7¼çš„资æº�æ‰�会被处ç�†ã„1¤7‚默认å„1¤7¼æ˜¯ 0.8〄1¤7
- minRatio: 0.8
- }),
- new WebpackVersionPlugin({
- // You must set the cb option
- cb: function (hashMap) {
- if (!isProd()) {
- versionConfig.version = new Date().getTime()
- fs.writeFileSync(resolve('./public/version.json'), JSON.stringify(versionConfig, null, 2))
- }
- }
- })
- ],
- // if prod is on, add externals
- externals: isProd() ? prodExternals : {}
- },
- chainWebpack: (config) => {
- config.resolve.alias
- .set('@$', resolve('src'))
- const svgRule = config.module.rule('svg')
- svgRule.uses.clear()
- svgRule
- .oneOf('inline')
- .resourceQuery(/inline/)
- .use('vue-svg-icon-loader')
- .loader('vue-svg-icon-loader')
- .end()
- .end()
- .oneOf('external')
- .use('file-loader')
- .loader('file-loader')
- .options({
- name: 'assets/[name].[hash:8].[ext]'
- })
- // if prod is on
- // assets require on cdn
- if (isProd()) {
- config.plugin('html').tap(args => {
- args[0].cdn = assetsCDN
- return args
- })
- }
- config.optimization && config.optimization.splitChunks({
- // 拆包�置
- chunks: 'all', // 三é„1¤7‰ä¸€ï¼„1¤7initial" åˆ�始化,"all"(默认就是all)$1¤7async"(动æ€�åŠ è½½ï¼‰
- minSize: 30000, // å½¢æˆ�丄1¤7个新代ç �å�—最å°�的体积,å�ªæœ‰ >= minSize çš„bundle会被拆分出æ�¥ 30000
- maxSize: 0, // 拆分之å‰�朄1¤7大的数å„1¤7¼ï¼Œé»˜è®¤ä¸„1¤7Œå�³ä¸�å�šé™�制
- minChunks: 1, // 引入次数,如果为2 那么丄1¤7个资æº�最少被引用两次æ‰�å�¯ä»¥è¢«æ‹†åˆ†å‡ºæ�¥
- maxAsyncRequests: 5, // æŒ‰éœ€åŠ è½½çš„æœ€å¤§å¹¶è¡Œè¯·æ±‚æ•°
- maxInitialRequests: 4, // 丄1¤7个入å�£æœ€å¤§å¹¶è¡Œè¯·æ±‚æ•°
- automaticNameDelimiter: '~', // 文件å��的连接笄1¤7
- name: true,
- cacheGroups: {
- // node_modules模å�—匄1¤7
- vendors: {
- test: /[\\/]node_modules[\\/]/,
- name: 'chunk-vendors',
- // name(module) {
- // const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
- // return `chunk.${packageName.replace('@', '')}`;
- // },
- chunks: 'all',
- priority: -10
- },
- // UI库å�•独拆匄1¤7
- antDesign: {
- name: 'chunk-antDesign',
- priority: 19, // the weight needs to be larger than libs and app or it will be packaged into libs or app
- test: /[\\/]node_modules[\\/]_?@ant-design(.*)/
- },
- antDesignVue: {
- name: 'chunk-antDesignVue',
- priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
- test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/
- },
- // 共享模�
- common: {
- name: 'chunk-common',
- minChunks: 2,
- maxSize: 1024, // 拆分之å‰�朄1¤7大的数å„1¤7¼ï¼Œé»˜è®¤ä¸„1¤7Œå�³ä¸�å�šé™�制
- priority: -20,
- reuseExistingChunk: true
- }
- }
- })
- // 分�打包大�
- if (process.env.npm_config_report) {
- config.plugin('webpack-bundle-analyzer')
- .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
- .end()
- }
- },
- css: {
- sourceMap: false,
- loaderOptions: {
- less: {
- modifyVars: {
- // less vars锛宑ustomize ant design theme
- 'primary-color': process.env.VUE_APP_THEME_COLOR,
- 'link-color': process.env.VUE_APP_THEME_COLOR
- // 'border-radius-base': '4px'
- },
- // do not remove this line
- javascriptEnabled: true
- }
- }
- },
- devServer: {
- // development server port 8000
- port: 8000,
- disableHostCheck: true,
- // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
- proxy: {
- '/api': {
- // target: 'http://192.168.2.103/qpls-md',
- target: 'https://p.iscm.360arrow.com/qpls-md',
- // ws: false,
- ws: true,
- changeOrigin: true,
- pathRewrite: {
- '^/api': ''
- }
- }
- },
- watchOptions: {
- ignored: [/node_modules/, /public/]
- }
- },
- // disable source map in production
- productionSourceMap: false,
- assetsDir: 'static',
- lintOnSave: undefined,
- // babel-loader no-ignore node_modules/*
- transpileDependencies: []
- }
- // preview.pro.loacg.com only do not use in your production;
- if (process.env.VUE_APP_PREVIEW === 'true') {
- console.log('VUE_APP_PREVIEW', true)
- // add `ThemeColorReplacer` plugin to webpack plugins
- vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
- }
- module.exports = vueConfig
|