Webpack cl4 配置

基本配置：

module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false,
  outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
)}

一.打正式环境包时设置productionSourceMap为false：

• productionSourceMap: true

  • 当设置为 true 时，在生产模式下会生成用于调试的源映射文件。这样，如果在生产环境出现错误，浏览器的开发者工具将能够还原回源代码，方便开发者进行调试。
  • 生成的源映射文件可能会增加构建的体积，但对于排查线上问题非常有帮助。

• productionSourceMap: false

  • 当设置为 false 时，在生产模式下不会生成源映射文件。这样能够减小构建产物的体积，提高生产环境的性能。但在出现问题时，调试时将不再能够直接追踪到源代码。

二.autoprefixer 样式自动添加浏览器前缀：

? ? ? ? npm install?autoprefixer

const autoprefixer = require('autoprefixer');

// 添加样式浏览器前缀
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [autoprefixer()]
        }
      }
    }
  },

?三.打正式包去掉注释/黄色警告/console.log

? ? ? ?安装?uglifyjs-webpack-plugin 插件：

? ? ? ? npm install?uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'; //判断打包生产环境

configureWebpack: config => {
    // const plugins = [];
    if (isProduction) {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false, //去除黄色警告
            compress: {
              drop_console: true,
              drop_debugger: false,// 防止利用debugger调试
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }

?四.配置路径别名

 // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
  },

?四.配置多个代理

? ? ? ? 详细介绍：

????????????????项目环境配置 本地/测试/预发/生产_预发布环境部署-CSDN博客

????????? ? ? ? vue项目配置多个代理-CSDN博客

// 代理
  devServer: {
    proxy: {
      "/iot": {
        target: process.env.VUE_APP_API_PATH_ONE,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/V1": {
        target: process.env.VUE_APP_API_PATH_TWO,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/runbayunapi": {
        target: process.env.VUE_APP_API_PATH,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
    },
  },

完整代码：

const { defineConfig } = require('@vue/cli-service')
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path');//引入path模块
function resolve(dir) {
  return path.join(__dirname, dir)//path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false,
  outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
  // 打包正式环境去除.map文件
  productionSourceMap: false,
  // 添加样式浏览器前缀
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [autoprefixer()]
        }
      }
    }
  },
  configureWebpack: config => {
    // const plugins = [];
    if (isProduction) {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false, //去除黄色警告
            compress: {
              drop_console: true,
              drop_debugger: false,// 防止利用debugger调试
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },
  // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
  },
  // 代理
  devServer: {
    proxy: {
      "/iot": {
        target: process.env.VUE_APP_API_PATH_ONE,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/V1": {
        target: process.env.VUE_APP_API_PATH_TWO,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/runbayunapi": {
        target: process.env.VUE_APP_API_PATH,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
    },
  },
})