vue.config.js配置打包之类操作 webpack(压缩js,css,图片)

// vue.config.js的基础配置
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩
const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀
const merge = require("lodash.merge"); //对象合并插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); //用于去掉注释
const AutoCodePlugin = require("./webpack/plugins/auto.code.plugin"); //组件自动化
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  //将部署应用程序包的基本URL(baseUrl在Vue CLI 3.3之前称为)
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets", // 静态资源目录 (js, css, img, fonts)
  productionSourceMap: false, // 生产环境 sourceMap,不生成map文件
  lintOnSave: false,//关闭eslint
  devServer: {
    port: 9020, // 设置端口
    open: true, // 启动后打开浏览器
    overlay: {
      //  当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    }
    // proxy: {
    //   "/*****/": {
    //     target: "https://*****.me",
    //     // false为http访问,true为https访问
    //     // secure: false,
    //     //是否跨域
    //     changeOrigin: true,
    //     ws: true,
    //     pathRewrite: {
    //       "^/*****": "",
    //     },
    //   },
    // },
  },
  //是否将组件中的css文件提取到独立的css文件
  css: {
    extract: process.env.NODE_ENV === "production",
  },
  // webpack配置(大部分操作都在此--压缩。去除打印)
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') { //判断是生产环境
    return {
      plugins: [
        // 构建时开启gzip,降低服务器压缩对CPU资源的占用,服务器也要相应开启gzip
        new CompressionPlugin({
          algorithm: 'gzip',//开启gzip
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"], //移除console
            },
          },
        }),
        new AutoCodePlugin([
          {
            /** ********* 组件自动化注册 ***********/
            // 文件监听等级
            maxlevel: 1,
            // 监听./src/router/*下的文件夹
            inPath: resolve("src/components"),
            // 自动在./src/router/目录下生成index.js
            outPath: resolve("src/components/index.js"),
            // 模板
            // fileName: 文件夹名称
            // filePath: 文件夹路径
            templateEach: (fileName) => {
              // chunk名称
              return `Vue.component('${fileName}', () => import(/* webpackChunkName: "components${fileName}" */
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值