Xf-association/vue.config.js

'use strict'
const path = require("path");
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, dir);
}
// 是否为生产环境
const isProduction = process.env.ENV !== 'development'
module.exports = {
    devServer: {
        port: 8081,
    },
    lintOnSave: false,//禁用代码检测
    productionSourceMap: false,
    configureWebpack: {
        name: '广州市建设工程消防协会',
        // 生产环境，则添加不参与打包的包名和依赖包的名称
        externals: {
            'vue': 'Vue',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
        },
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
    chainWebpack(config) {
        if (isProduction) {
            // ============压缩图片 start============
            // config.module
            //     .rule('images') 
            //     .use('image-webpack-loader')
            //     .loader('image-webpack-loader')
            //     .options({ bypassOnDebug: true })
            //     .end();
            // ============压缩图片 end============
            // 移除 prefetch 插件
            config.plugins.delete('prefetch')
            // 移除 preload 插件
            config.plugins.delete('preload');
            config.plugin('provide').use(webpack.ProvidePlugin, [{
                'window.Quill': 'quill'
            }])
            // 生产环境，开启js\css压缩
            config.plugin('compressionPlugin').use(new CompressionWebpackPlugin({
                test: /\.(js|css|less|map)$/, // 匹配文件名
                threshold: 1024, // 对超过10k的数据压缩
                minRatio: 0.8,
            }))
            config
                .when(isProduction,
                    config => {
                        config
                            .plugin('ScriptExtHtmlWebpackPlugin')
                            .after('html')
                            .use('script-ext-html-webpack-plugin', [{
                                // `runtime` must same as runtimeChunk name. default is `runtime`
                                inline: /runtime\..*\.js$/
                            }])
                            .end()
                        config
                            .optimization.splitChunks({
                                chunks: 'all',
                                minSize: 1000000,
                                maxSize: 3000000,
                                cacheGroups: {
                                    libs: {
                                        name: 'chunk-libs',
                                        test: /[\\/]node_modules[\\/]/,
                                        priority: 10,
                                        chunks: 'initial' // only package third parties that are initially dependent
                                    },
                                    elementUI: {
                                        name: 'chunk-elementUI', // split elementUI into a single package
                                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                                    },
                                    commons: {
                                        name: 'chunk-commons',
                                        test: resolve('src/components'), // can customize your rules
                                        minChunks: 3, //  minimum common number
                                        priority: 5,
                                        reuseExistingChunk: true
                                    }
                                }
                            })
                        config.optimization.runtimeChunk('single'),
                            config.optimization.providedExports = true,
                            config.optimization.usedExports = true,
                            config.optimization.innerGraph = true,
                            config.optimization.sideEffects = true,
                        {
                            from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
                            to: './' //到根目录下
                        }
                    }
                )
        }
    },
}