vue.config.js

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
// js丑化
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require("webpack");
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// css添加版本号
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const productionGzipExtensions = ['js', 'css']

// glob检测所有的css
const glob = require('glob');
// 去除冗余的css
const PurifyCssWebpack = require('purifycss-webpack');

// 打包时把一些静态文件一起打包
const CopyWebpackPlugin = require('copy-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir)
}
// 以时间戳作为版本号
function timestampToTime() {
    var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear();
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

    strDate = Y + '' + M + '' + D + '' + h + '' + m + '' + s;
    return strDate;
}

const cdn = {
    css: [],
    js: [
        'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
        'https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.staticfile.org/vuex/3.1.2/vuex.min.js',
        'https://cdn.staticfile.org/axios/0.19.0/axios.min.js',
        'https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js',
        'https://cdn.staticfile.org/qs/6.9.1/qs.min.js',
    ]
}

module.exports = {
    publicPath: '/',
    // 设置代理
    devServer: {
        open: true,
        port: '9000'
    },
    pwa: {
        iconPaths: {
            favicon32: 'favicon1.ico',
            favicon16: 'favicon1.ico',
            appleTouchIcon: 'favicon1.ico',
            maskIcon: 'favicon1.ico',
            msTileImage: 'favicon1.ico'
        }
    },
    //生产环境构建文件的目录
    outputDir: "dist",
    // 静态文件构建的目录
    assetsDir: 'assets',
    //生产环境是否生成SourceMap
    productionSourceMap: true,
    // 是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: true,
    // 默认值为require('os').cpus().length > 1  在系统的 CPU 有多于一个内核时自动启用
    parallel: require('os').cpus().length > 1,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: IS_PROD ? true : false,
        // 开启 CSS source maps?
        sourceMap: IS_PROD ? false : true,
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 37.5, // 换算的基数(设计图750的为75)
                        selectorBlackList: [], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    },
    transpileDependencies: [
        'async', 'qs', 'vue-lazyload', 'vue-3d-picker', 'mint-ui'
    ],
    configureWebpack: config => {
        //生产环境去掉console 和 debugger
        //压缩代码减少文件体积
        if (IS_PROD) {
            // 配置不打包的插件  key是require的名字 value是库暴露出来的方法
            config.externals = {
                "vue": "Vue",
                "vue-router": "VueRouter",
                "vuex": "Vuex",
                "axios": "axios",
                "qs": "Qs",
                "jquery": "jQuery",
            }
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_console: true,
                            drop_debugger: true,//移除debugger
                            pure_funcs: ['console.log', 'console.table']//移除console
                        }
                    },
                    sourceMap: false,
                })
            );
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
            config.plugins.push(
                new MiniCssExtractPlugin({
                    // 修改打包后css文件名
                    filename: `assets/css/[name].${timestampToTime()}.css`,
                    chunkFilename: `assets/css/[name].${timestampToTime()}.css`
                })
            );
            // 公共代码抽离
            config.optimization = {
                splitChunks: {
                    cacheGroups: {
                        vendor: {
                            chunks: 'all',
                            test: /node_modules/,
                            name: 'vendor',
                            minChunks: 1,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 100
                        },
                        common: {
                            chunks: 'all',
                            test: /[\\/]src[\\/]js[\\/]/,
                            name: 'common',
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 60
                        },
                        styles: {
                            name: 'styles',
                            test: /\.(sa|sc|c)ss$/,
                            chunks: 'all',
                            enforce: true
                        },
                        runtimeChunk: {
                            name: 'manifest'
                        }
                    }
                }
            }
            // 将部分静态文件一起打包
            config.plugins.push(
                new CopyWebpackPlugin([
                    {
                        from: path.join(__dirname, "./static/MP_verify_0ZWw0QASKR3fdW8L.txt"),
                        to: path.join(__dirname, "./dist/MP_verify_0ZWw0QASKR3fdW8L.txt")
                    },
                    {
                        from: path.join(__dirname, "./static/apple-app-site-association"),
                        to: path.join(__dirname, "./dist")
                    },
                ])
            )
        }
        config.plugins.push(
            new webpack.ProvidePlugin({
                jQuery: "jquery",
                $: "jquery"
            })
        )
    },
    chainWebpack: config => {
        // 修复HMR
        config.resolve.symlinks(true)
        //配置别名
        config.resolve.alias
            .set("@", resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
        if (IS_PROD) {
            // 生产环境配置

            // 图片增加版本号
            config.module
                .rule("images")
                .use("url-loader")
                .tap(options => {
                    options.name = `img/[name].${timestampToTime()}.[ext]`;
                    options.fallback = {
                        loader: "file-loader",
                        options: {
                            name: `img/[name].${timestampToTime()}.[ext]`
                        }
                    };
                    return options;
                });
            // js增加版本号
            config.output.filename('assets/js/[name]' + timestampToTime() + '.js').end();
            config.output.chunkFilename('assets/js/[name]' + timestampToTime() + '.js').end();

            // 不打包的插件，需要把值传到htmlWebpackPlugin
            config.plugin("html").tap(options => {
                options[0].cdn = cdn;
                return options;
            })


        } else {
            //开发环境配置

        }
    }

}