vue.config.js vue 打包配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const Timestamp = new Date().getTime();

module.exports = {
    publicPath: './',
    productionSourceMap: false, // false : 不生成map文件
    // 编译入口配置，如果不配置，默认就是src
    /* pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    }, */
    devServer: {
        port: 8080, //侦听端口
        // 开发服务器，反向代理配置
        proxy: {
            // 上传文件的又拍云地址
            '/upload/': { 
                target: 'https://v0.api.upyun.com', //跨域转发的实际地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                     '^/upload':''      //将原请求中的/upload去掉
                }
            },
        },
    },
    outputDir: process.env.outputDir, // 打包生成目录
    // 第三方插件配置，配合浏览器vue开发调试插件
    pluginOptions: {
        'process.env': {
            NODE_ENV: '"development"'
        }
    },
    // 编译打包配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 生产环境，给编译后的文件生成压缩包，需要配置web服务器支持文件压缩输出
            config.plugins.push(
                new CompressionWebpackPlugin({
                    asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
        }

        // 给编译打包的js文件加上时间戳后缀，为了解决缓存的问题，同时要给public/index.html里 添加 
        /* 
        <meta   http-equiv="Expires"   CONTENT="0">
        <meta   http-equiv="Cache-Control"   CONTENT="no-cache">
        <meta   http-equiv="Pragma"   CONTENT="no-cache"> 
        */
        config.output.filename = `static/js/[name].${Timestamp}.js`
        config.output.chunkFilename = `static/js/[name].${Timestamp}.js`
    },
    
    css: {
        loaderOptions: {
            // 引入全局的css样式定义文件
            sass: {
                prependData: `@import "@/assets/scss/variable.scss";`
            }
        },
        extract: {
            //一种方式，打包后的css 会带版本号，不改变文件名的。
            /* filename: 'css/[name].css?v=' + Timestamp,
            chunkFilename:'css/[name].css?v=' + Timestamp */
            //一种方式，每次打包后的css文件名会变更新。
            filename: 'css/[name].' + Timestamp + '.css',
            chunkFilename: 'css/[name].' + Timestamp + '.css'
        }
    },
}