1. 'use strict'
    2. const path = require('path')
    3. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    5. function resolve(dir) {
    6.   return path.join(__dirname, dir)
    7. }
    9. const webpack = require('webpack')
    10. const px2rem = require('postcss-px2rem')
    11. const postcss = px2rem({
    12.     // 基准大小 baseSize，需要和rem.js中相同
    13.     remUnit: 16
    14. })
    16. const isProduction = process.env.NODE_ENV === 'production';
    18. // // cdn预加载使用,如果可以访问公网就可以放开
    19. // const externals = {
    20. //     vue: 'Vue',
    21. //     'vue-router': 'VueRouter',
    22. //     vuex: 'Vuex',
    23. //     axios: 'axios',
    24. //     "element-ui": "ELEMENT",
    25. //     'echarts':'echarts',
    26. // }
    28. // If your port is set to 80,
    29. // use administrator privileges to execute the command line.
    30. // For example, Mac: sudo npm run
    31. // You can change the port by the following method:
    32. // port = 9527 npm run dev OR npm run dev --port = 9527
    34. const port = process.env.port || process.env.npm_config_port || 9527 // dev port
    36. // All configuration item explanations can be find in https://cli.vuejs.org/config/
    37. module.exports = {
    38.   /**
    39.    * You will need to set publicPath if you plan to deploy your site under a sub path,
    40.    * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
    41.    * then publicPath should be set to "/bar/".
    42.    * In most cases please use '/' !!!
    43.    * Detail: https://cli.vuejs.org/config/#publicpath
    44.    */
    45.   publicPath: '/',
    46.   outputDir: 'dist',
    47.   assetsDir: 'static',
    48.   lintOnSave: false,
    49.   // lintOnSave: process.env.NODE_ENV === 'development',
    50.   productionSourceMap: false,
    51.     css: {
    52.         loaderOptions: {
    53.             postcss: {
    54.                 plugins: [
    55.                     postcss
    56.                 ]
    57.             },
    58.             scss:{
    59.                 prependData:`@import "~@/styles/mixin.scss";`
    60.             }
    61.         }
    62.     },
    63.   devServer: {
    64.     port: port,
    65.     open: true,
    66.     overlay: {
    67.       warnings: false,
    68.       errors: true
    69.     },
    70.     proxy: {
    71.       [process.env.VUE_APP_BASE_API]: {
    72.         // target: `http://localhost:8081/ipamPortal`, //本机IP
    73.        target: `http://192.168.60.227:8080/zoneportal/`, //内网IP
    74.        // target: `http://192.168.60.149:8080/zoneportal/`, //内网IP
    75.        //    target: `http://172.168.70.176:8080/ipamPortal/`,
    76.        // target: `http://172.168.70.128:8080/ipamPortal/`, //内网IP
    77.        //  target: `http://192.168.60.225:8080/zoneportal/`, //测试环境IP
    78.        //  target: `http://120.236.178.177:22780/zoneportal`, //外网
    79.         // target: `window.config.app_api_url`, //外网
    80.         changeOrigin: true,
    81.         pathRewrite: {
    82.           ["^" + process.env.VUE_APP_BASE_API]: ""
    83.         }
    84.       }
    85.     }
    86.     // before: require('./mock/mock-server.js')
    87.   },
    88.   configureWebpack: config => {
    89.       const plugins = [];
    90.         if (isProduction) {
    91.             plugins.push(
    92.                 new UglifyJsPlugin({
    93.                     uglifyOptions: {
    94.                         output: {
    95.                             comments: false, // 去掉注释
    96.                         },
    97.                         warnings: false,
    98.                         compress: {
    99.                             drop_console: true,
    100.                             drop_debugger: false,
    101.                             pure_funcs: ['console.log']//移除console
    102.                         }
    103.                     }
    104.                 })
    105.             )
    106.             // 开启分离js
    107.             config.optimization = {
    108.                 runtimeChunk: 'single',
    109.                 splitChunks: {
    110.                     chunks: 'all',
    111.                     maxInitialRequests: Infinity,
    112.                     minSize: 1000 * 60,
    113.                     cacheGroups: {
    114.                         vendor: {
    115.                             test: /[\\/]node_modules[\\/]/,
    116.                             name(module) {
    117.                                 // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
    118.                                 const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
    119.                                 return `npm.${packageName.replace('@', '')}`
    120.                             }
    121.                         }
    122.                     }
    123.                 }
    124.             };
    126.             // 取消webpack警告的性能提示
    127.             config.performance = {
    128.                 hints: 'warning',
    129.                 //入口起点的最大体积
    130.                 maxEntrypointSize: 1000 * 500,
    131.                 //生成文件的最大体积
    132.                 maxAssetSize: 1000 * 1000,
    133.                 //只给出 js 文件的性能提示
    134.                 assetFilter: function (assetFilename) {
    135.                     return assetFilename.endsWith('.js');
    136.                 }
    137.             }
    139.             // 打包时npm包转CDN
    140.             // config.externals = externals;
    141.         }
    142.         return { plugins }
    143.     },
    144.   chainWebpack(config) {
    145.       // CDN外链，会插入到index.html中
    146.       // const cdn = {
    147.       //     // 开发环境
    148.       //     dev: {
    149.       //         css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'],
    150.       //         js: []
    151.       //     },
    152.       //     // 生产环境
    153.       //     build: {
    154.       //         css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css','https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css'],
    155.       //         js: [
    156.       //             'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    157.       //             'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
    158.       //             'https://cdn.jsdelivr.net/npm/axios@0.18.1/dist/axios.min.js',
    159.       //             'https://cdn.jsdelivr.net/npm/vuex@3.1.0/dist/vuex.min.js',
    160.       //             'https://unpkg.com/element-ui/lib/index.js',
    161.       //             "https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"
    162.       //         ]
    163.       //     }
    164.       // }
    165.     // webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete
    166.       config.optimization.delete('splitChunks')
    167.     // it can improve the speed of the first screen, it is recommended to turn on preload
    168.     // it can improve the speed of the first screen, it is recommended to turn on preload
    169.     config.plugin('preload').tap(() => [
    170.       {
    171.         rel: 'preload',
    172.         // to ignore runtime.js
    173.         // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
    174.         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
    175.         include: 'initial'
    176.       }
    177.     ])
    179.     // when there are many pages, it will cause too many meaningless requests
    180.     config.plugins.delete('prefetch')
    182.     // set svg-sprite-loader
    183.     config.module
    184.       .rule('svg')
    185.       .exclude.add(resolve('src/icons'))
    186.       .end()
    187.     config.module
    188.       .rule('icons')
    189.       .test(/\.svg$/)
    190.       .include.add(resolve('src/icons'))
    191.       .end()
    192.       .use('svg-sprite-loader')
    193.       .loader('svg-sprite-loader')
    194.       .options({
    195.         symbolId: 'icon-[name]'
    196.       })
    197.       .end()
    199.       config.plugin('provide').use(webpack.ProvidePlugin, [{
    200.           $: 'jquery',
    201.           jquery: 'jquery',
    202.           jQuery: 'jquery',
    203.           'window.jQuery': 'jquery',
    204.       }])
    206.       // config.plugin('html').tap(args => {
    207.       //     if (process.env.NODE_ENV === 'production') {
    208.       //         args[0].cdn = cdn.build
    209.       //     }
    210.       //     if (process.env.NODE_ENV === 'development') {
    211.       //         args[0].cdn = cdn.dev
    212.       //     }
    213.       //     return args
    214.       // })
    216.     config
    217.       .when(process.env.NODE_ENV !== 'development',
    218.         config => {
    219.           config
    220.             .plugin('ScriptExtHtmlWebpackPlugin')
    221.             .after('html')
    222.             .use('script-ext-html-webpack-plugin', [{
    223.             // `runtime` must same as runtimeChunk name. default is `runtime`
    224.               inline: /runtime\..*\.js$/
    225.             }])
    226.             .end()
    227.   /*        config
    228.             .optimization.splitChunks({
    229.               chunks: 'all',
    230.               cacheGroups: {
    231.                 libs: {
    232.                   name: 'chunk-libs',
    233.                   test: /[\\/]node_modules[\\/]/,
    234.                   priority: 10,
    235.                   chunks: 'initial' // only package third parties that are initially dependent
    236.                 },
    237.                 elementUI: {
    238.                   name: 'chunk-elementUI', // split elementUI into a single package
    239.                   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
    240.                   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
    241.                 },
    242.                 commons: {
    243.                   name: 'chunk-commons',
    244.                   test: resolve('src/components'), // can customize your rules
    245.                   minChunks: 3, //  minimum common number
    246.                   priority: 5,
    247.                   reuseExistingChunk: true
    248.                 }
    249.               }
    250.             })*/
    251.           // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
    252.           config.optimization.runtimeChunk('single')
    253.         }
    254.       )
    255.   }
    256. }