vue config js 配置1

const IS_PROD = process.env.NODE_ENV === 'production'
const chains = {
    // 打包分析
    bundleAnalyzer(config) {
        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
            .BundleAnalyzerPlugin
        if (IS_PROD) {
            config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
                analyzerMode: 'static'
            }])
        }
    }
}

// configureWebpack相关函数
const configures = {
    uglify(config) {
        const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
        return [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                        drop_console: true,
                        drop_debugger: false,
                        pure_funcs: ['console.log'] // 移除console
                    }
                },
                sourceMap: false,
                parallel: true
            })
        ]
    },
    // gzip zopfli 压缩
    gzip(config) {
        const CompressionWebpackPlugin = require('compression-webpack-plugin')
        const zopfli = require('@gfx/zopfli')
        const BrotliPlugin = require('brotli-webpack-plugin')
        const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i
        return [
            new CompressionWebpackPlugin({
                algorithm(input, compressionOptions, callback) {
                    return zopfli.gzip(input, compressionOptions, callback)
                },
                compressionOptions: {
                    numiterations: 15
                },
                minRatio: 0.8,
                test: productionGzipExtensions
            }),
            new BrotliPlugin({
                test: productionGzipExtensions,
                minRatio: 0.8
            })
        ]
    }
}
const path = require('path')
const resolve = dir => {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: IS_PROD ? "./" : "./",
    productionSourceMap: false, // 生产环境是否生成 SourceMap
    lintOnSave: true,
    devServer: {
        open: true, // 是否浏览器打开
        hotOnly: true, // 当编译失败时，不刷新页面
        compress: true, // 为所服务的一切启用gzip压缩
        host: '0.0.0.0', // 指定要使用的主机。默认情况下这是localhost。
        port: 8090, // 端口号，
        proxy: {
            "/api": {
                target: "",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    configureWebpack(config) {
        const plugins = []
        Object.keys(configures).forEach(key => {
            plugins.concat(configures[key](config))
        })
        config.plugins = [...config.plugins, ...plugins]
            //关闭调试工具
        config.devtool = 'none'
        return {
            resolve: {
                alias: {
                    '@': resolve('src')
                }
            }
        }
    },
    chainWebpack(config) {
        config.optimization.splitChunks = {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    chunks: 'all'
                }
            }
        }
        Object.keys(chains).forEach(key => {
            chains[key](config)
        })
    },
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
        },
        demo: {
            // page 的入口
            entry: 'src/demo.js',
        },
    },
}