vue-cli 3.0 vue.config.js配置

最新推荐文章于 2023-12-21 22:27:37 发布

weixin_42670357

最新推荐文章于 2023-12-21 22:27:37 发布

阅读量366

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42670357/article/details/105413788

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.去掉注释、去掉console.log

cnpm i uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉注释
module.exports = {
    configureWebpack: config => {
          if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_debugger: true,
                            drop_console: true, //生产环境自动删除console
                        },
                        warnings: false,
                    },
                    sourceMap: false,
                    parallel: true, //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
                })
            )
        }
  }
}

2.直接打包成zip压缩文件

cnpm i filemanager-webpack-plugin 
const FileManagerPlugin = require('filemanager-webpack-plugin')
module.exports = {
    configureWebpack: config => {
          config.plugins.push(
            new FileManagerPlugin({
                onEnd: {
                    delete: [ //首先需要删除项目根目录下的yztyw.zip
                        './yztyw.zip',
                    ],
                    archive: [ //然后我们选择yztyw文件夹将之打包成yztyw.zip并放在根目录
                        { source: './yztyw', destination: './yztyw.zip' },
                    ]
                }
            })
        )
  }
}

3.压缩图片和js，css文件(经试过，不用压缩js和css,只压缩图片即可)

cnpm i image-webpack-loader
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  publicPath: './',
  chainWebpack: config => {
    // 解决ie11兼容ES6
    config.entry('main').add('babel-polyfill')
    // 开启图片压缩
    config.module.rule('images')
    .test(/\.(png|jpe?g|gif)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    // 开启js、css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
      .use(new CompressionPlugin({
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }
  },
  transpileDependencies: [
        'biyi-admin', // 指定对第三方依赖包进行babel-polyfill处理
    ]
}

4.总结

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: '/yztyw/',
    outputDir: 'yztyw',
    chainWebpack: config => {
        config.module.rule('svg').exclude.add(resolve('src/icons')).end();
        console.info(resolve('src/icons/svg'));
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include.add(resolve('src/icons')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            // 压缩图片
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
    },
    configureWebpack: config => {
        config.devtool = 'source-map'
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_debugger: true,
                            drop_console: true, //生产环境自动删除console
                        },
                        warnings: false,
                    },
                    sourceMap: false,
                    parallel: true, //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
                })
            )
            config.plugins.push(
                new FileManagerPlugin({
                    onEnd: {
                        delete: [ //首先需要删除项目根目录下的yztyw.zip
                            './yztyw.zip',
                        ],
                        archive: [ //然后我们选择yztyw文件夹将之打包成yztyw.zip并放在根目录
                            { source: './yztyw', destination: './yztyw.zip' },
                        ]
                    }
                })
            )
        }
    }
}